/* ============================================================
   WODZ LP V5 — FENÊTRE D'EXPLORATION & ÉCRANS SIMULÉS
   Le démonstrateur : une fenêtre wodz:// qui reprend le chrome
   du vrai logiciel (sidebar, topbar) et rejoue chaque module
   avec les données de la salle fictive « La Fabrik ».
   Dépend des tokens définis dans os.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. LA FENÊTRE — cadre, barre de titre, badge exploration
   ------------------------------------------------------------ */
.os-window {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* Cadre 16:9 posé par os.js (fitOsWindows) : le corps est mis en page à une
   largeur fixe puis mis à l'échelle, comme une capture d'écran de bureau.
   La règle ci-dessous n'est qu'un repli si le script ne tourne pas. */
@supports (aspect-ratio: 16 / 9) {
  .os-window[data-fit="16-9"]:not([style*="height"]) { aspect-ratio: 16 / 9; }
}
.os-body { will-change: transform; }
/* Téléphone : l'écran de bureau en flux naturel, plafonné avec un fondu —
   au-delà, les grilles pensées pour 1 200 px ne font que s'écraser. */
@media (max-width: 759px) {
  .os-window[data-fit="16-9"] { max-height: 620px; }
  .os-window[data-fit="16-9"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
    z-index: 15;
  }
  .scr-cols--wf { grid-template-columns: 1fr !important; }
}
.os-titlebar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 40px;
  padding: 0 1rem;
  background: color-mix(in oklab, var(--bg) 80%, var(--text) 4%);
  border-bottom: 1px solid var(--line);
}
.os-dots {
  display: flex;
  gap: 7px;
  flex: none;
}
.os-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: block;
}
.os-dots i:nth-child(1) { background: #ff5f57; }
.os-dots i:nth-child(2) { background: #febc2e; }
.os-dots i:nth-child(3) { background: var(--lime); }
.os-url {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-url b { color: var(--text-2); font-weight: 600; }
.os-mode {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
  border: 1px solid var(--lime-edge);
  border-radius: 6px;
  padding: 0.22rem 0.55rem;
  background: var(--lime-soft);
}
.os-mode i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* corps : sidebar + écran */
.os-body {
  display: flex;
  align-items: stretch;
  min-height: 430px;
}

/* ------------------------------------------------------------
   2. SIDEBAR PRODUIT — la navigation du site
   ------------------------------------------------------------ */
.os-side {
  width: 208px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--bg) 70%, var(--surface));
  border-right: 1px solid var(--line);
  padding-bottom: 0.9rem;
}
.os-side__box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem 0.45rem;
}
.os-side__mark {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-lime);
  background: linear-gradient(135deg, var(--lime), color-mix(in oklab, var(--lime), var(--text) 25%));
}
.os-side__name {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.os-side__name small {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-side__sec {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.55rem 1rem 0.2rem;
}
.os-side__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.55rem;
}
.os-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 0.65rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.os-item .ic { width: 15px; height: 15px; }
.os-item:hover { background: var(--lime-soft); color: var(--text); }
/* Entrées présentes dans le vrai menu du logiciel mais sans page dédiée sur
   la landing : affichées pour que le menu reste fidèle, non cliquables. */
.os-item--static { color: var(--text-3); cursor: default; }
.os-item--static:hover { background: transparent; color: var(--text-3); }
.os-item.active {
  background: var(--lime-soft);
  color: var(--lime-ink);
  font-weight: 700;
}
.os-item.active::before {
  content: "";
  position: absolute;
  left: -0.55rem; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lime);
}
.os-item__badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
}
.os-item__badge--soon {
  background: transparent;
  border: 1px solid var(--lime-edge);
  color: var(--lime-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.os-side__cta {
  margin: auto 0.8rem 0;
  padding-top: 0.6rem;
}

/* ------------------------------------------------------------
   3. TOPBAR PRODUIT + ZONE ÉCRAN
   ------------------------------------------------------------ */
.os-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
}
.os-topbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.os-search {
  flex: 1;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-3);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-search .ic { width: 13px; height: 13px; }
.os-topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.os-iconbtn {
  position: relative;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-3);
  background: transparent;
}
.os-iconbtn .ic { width: 15px; height: 15px; }
.os-iconbtn .ping {
  position: absolute;
  top: 5px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--surface);
}
.os-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.os-user__av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--on-lime);
  background: linear-gradient(135deg, var(--lime), color-mix(in oklab, var(--lime), var(--text) 30%));
}
.os-user__name {
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.os-screen {
  flex: 1;
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* fond uni : les scanlines sont réservées aux bandeaux ops (.scr-hero, .pg-hero) */
}

/* colonnes internes d'écran */
.scr-cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.9rem;
  align-items: start;
}
@media (max-width: 720px) {
  .scr-cols { grid-template-columns: 1fr; }
}

/* en-tête d'écran */
.scr-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.scr-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.scr-head__eyebrow .slash { color: var(--text-3); font-weight: 500; }
.scr-head__title {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0.15rem 0 0;
}
.scr-head__right {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

/* boutons in-app */
.os-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: default;
  white-space: nowrap;
}
.os-btn .ic { width: 12px; height: 12px; }
.os-btn--primary { background: var(--lime); color: var(--on-lime); }
.os-btn--ghost   { border-color: var(--line); color: var(--text-2); background: var(--surface); }

/* ------------------------------------------------------------
   3bis. HERO PROCESS-OPS IN-APP — réplique du vrai dashboard
   (ops-hero : eyebrow à point, identité, lede, bande "pouls")
   ------------------------------------------------------------ */
.scr-hero {
  position: relative;
  padding: 1.15rem 1.3rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--lime) 13%, transparent), transparent 55%),
    var(--surface);
}
.scr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--scan) 3px 4px);
}
.scr-hero::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 220px; height: 88px;
  background: linear-gradient(135deg, var(--lime), color-mix(in oklab, var(--lime), var(--text) 22%));
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.85;
}
.scr-hero > * { position: relative; z-index: 2; }
.scr-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
  margin-bottom: 0.75rem;
}
.scr-hero__eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-soft);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.scr-hero__eyebrow .bracket { color: var(--text-3); font-weight: 500; }
.scr-hero__id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.scr-hero__logo {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--on-lime);
  background: linear-gradient(135deg, var(--lime), color-mix(in oklab, var(--lime), var(--text) 25%));
  box-shadow: 0 6px 16px -6px var(--lime-edge);
}
.scr-hero__id h2 {
  margin: 0 0 0.15rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-transform: uppercase;
}
.scr-hero__id h2 .accent { color: var(--lime-ink); }
.scr-hero__lede {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-2);
  max-width: 520px;
}
/* bande "pouls" — KPI intégrés au hero */
.scr-pulse {
  display: flex;
  align-items: flex-end;
  gap: 1rem 1.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.pstat {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 96px;
}
.pstat__l {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pstat__v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}
.pstat__v.is-accent { color: var(--lime-ink); }
.pstat__m {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.66rem;
  color: var(--text-3);
}
.psep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

/* section-head in-app : eyebrow + filet + compteur */
.scr-sec {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.25rem 0.1rem -0.15rem;
}
.scr-sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-ink);
  white-space: nowrap;
}
.scr-sec__eyebrow .bracket { color: var(--text-3); font-weight: 500; }
.scr-sec__eyebrow .dim {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
}
.scr-sec__rule { flex: 1; height: 1px; background: var(--line); }
.scr-sec__count {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   3ter. TUILES « À TRAITER » — réplique triage du vrai dashboard
   ------------------------------------------------------------ */
.tri-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.tri {
  --tone: var(--line);
  position: relative;
  text-align: left;
  padding: 0.75rem 0.85rem 0.7rem;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tone) 12%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in oklab, var(--tone) 32%, var(--line));
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.tri::after {
  content: "";
  position: absolute;
  right: 9px; bottom: 9px;
  width: 10px; height: 10px;
  pointer-events: none;
  border-right: 2px solid color-mix(in oklab, var(--tone) 60%, transparent);
  border-bottom: 2px solid color-mix(in oklab, var(--tone) 60%, transparent);
  border-bottom-right-radius: 3px;
  opacity: 0.7;
}
.tri:hover {
  transform: translateY(-2px);
  border-color: var(--tone);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tone) 40%, transparent), 0 12px 26px -14px var(--tone);
}
.tri__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  z-index: 2;
}
.tri__led {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 25%, transparent);
}
.tri--danger .tri__led, .tri--warn .tri__led { animation: pulse-dot 1.6s ease-in-out infinite; }
.tri__tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--tone) 72%, var(--text));
}
.tri__pips {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
}
.tri__pips i {
  width: 5px; height: 10px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--tone) 18%, var(--line));
}
.tri__pips.p1 i:nth-child(1),
.tri__pips.p2 i:nth-child(-n+2),
.tri__pips.p3 i:nth-child(-n+3) {
  background: var(--tone);
  box-shadow: 0 0 6px color-mix(in oklab, var(--tone) 55%, transparent);
}
.tri__num {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  margin: 0.5rem 0 0.2rem;
  color: var(--text);
  text-shadow: 0 0 20px color-mix(in oklab, var(--tone) 45%, transparent);
}
.tri__meta {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-3);
}
.tri__meta b { color: var(--tone); font-weight: 700; }
.tri--danger { --tone: #FF5C5C; }
.tri--warn   { --tone: #F5A623; }
.tri--indigo { --tone: #8B7CF6; }
.tri--sky    { --tone: #38BDF8; }
.tri--ok     { --tone: #34D399; }

/* ------------------------------------------------------------
   4. COMPOSANTS D'ÉCRAN GÉNÉRIQUES
   ------------------------------------------------------------ */
/* panneau interne */
.pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pane__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}
.pane__title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}
.pane__tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pane__right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.pane__body { padding: 0.9rem 0.95rem; }
.pane__foot {
  padding: 0.6rem 0.95rem;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--surface) 70%, var(--bg));
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
a.pane__foot { display: block; text-decoration: none; transition: background var(--t-fast); }
a.pane__foot:hover { background: var(--lime-soft); }

/* KPI */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
.kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.95rem;
  overflow: hidden;
}
.kpi__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kpi__label .ic { width: 12px; height: 12px; color: var(--lime-ink); }
.kpi__value {
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  margin-top: 0.4rem;
  line-height: 1.1;
}
.kpi__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.66rem;
  color: var(--text-3);
}
.trend {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
}
.trend--up   { background: var(--ok-bg); color: var(--ok); }
.trend--down { background: var(--danger-bg); color: var(--danger); }
.trend--flat { background: var(--surface-2); color: var(--text-3); }
.kpi__spark {
  position: absolute;
  right: 0.8rem; bottom: 0.7rem;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  opacity: 0.65;
}
.kpi__spark i {
  width: 4px;
  border-radius: 2px;
  background: var(--lime);
}

/* tags / badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag--ok     { background: var(--ok-bg);     color: var(--ok); }
.tag--danger { background: var(--danger-bg); color: var(--danger); }
.tag--warn   { background: var(--warn-bg);   color: var(--warn); }
.tag--info   { background: var(--info-bg);   color: var(--info); }
.tag--violet { background: var(--violet-bg); color: var(--violet); }
.tag--lime   { background: var(--lime-soft); color: var(--lime-ink); }
.tag--neutral { background: var(--surface-2); color: var(--text-3); }

/* avatar */
.av {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #5f6a76, #414a54);
}
.av--sm { width: 22px; height: 22px; font-size: 0.52rem; }

/* rangée de liste */
.lrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.78rem;
}
.lrow:last-child { border-bottom: none; }
.lrow__who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.lrow__name { font-weight: 600; white-space: nowrap; }
.lrow__sub {
  display: block;
  font-size: 0.66rem;
  color: var(--text-3);
  white-space: nowrap;
}
.lrow__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}
.lrow__amount {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}

/* toggle produit */
.switch {
  position: relative;
  width: 30px; height: 17px;
  flex: none;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform var(--t-fast), background var(--t-fast);
}
.switch.on { background: var(--lime-soft); border-color: var(--lime-edge); }
.switch.on::after { transform: translateX(13px); background: var(--lime); }

/* barres d'engagement (assiduité) */
.eng {
  display: flex;
  gap: 3px;
}
.eng i {
  width: 12px; height: 5px;
  border-radius: 2px;
  background: var(--surface-2);
}
.eng i.on   { background: var(--ok); }
.eng i.warn { background: var(--warn); }

/* graphique barres CSS */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 0.4rem 0.2rem 0;
}
.chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: color-mix(in oklab, var(--lime) 45%, var(--surface-2));
  min-height: 8px;
}
.chart i.hot { background: var(--lime); }
.chart-x {
  display: flex;
  gap: 6px;
  margin-top: 0.4rem;
}
.chart-x span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ------------------------------------------------------------
   5. PLANNING — timeline du jour
   ------------------------------------------------------------ */
.tl {
  position: relative;
  height: 218px;
  min-width: 620px;
}
.tl-wrap { overflow-x: auto; }
.tl-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
}
.tl-tick span {
  position: absolute;
  top: 5px; left: 6px;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--text-3);
}
.tl-now {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--lime);
  z-index: 5;
}
.tl-now::before {
  content: "";
  position: absolute;
  top: 0; left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-soft);
}
.tl-now span {
  position: absolute;
  top: 20px; left: 6px;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--on-lime);
  background: var(--lime);
  padding: 0.08rem 0.4rem;
  border-radius: 5px;
  white-space: nowrap;
}
.tl-card {
  --cat: var(--lime);
  position: absolute;
  height: 78px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat);
  border-radius: 9px;
  padding: 0.45rem 0.55rem 0.6rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  z-index: 6;
}
.tl-card.past { opacity: 0.5; }
.tl-card.live {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime), 0 8px 18px -8px var(--lime-edge);
}
.tl-card__name {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 0.62rem;
  color: var(--text-3);
}
.tl-card__cap {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  padding: 0.08rem 0.36rem;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-3);
  white-space: nowrap;
}
.tl-card__cap.full { background: var(--danger-bg); color: var(--danger); }
.tl-card__cap.wait { background: var(--info-bg); color: var(--info); }
/* étoile "créneaux essai" (prospects) — comme le vrai planning */
.tl-card__star {
  width: 11px; height: 11px;
  flex: none;
  color: var(--lime-ink);
  vertical-align: -0.08em;
}
/* pastille d'état sous le nom (● En cours / +2 attente) */
.tl-card__tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  margin-top: 0.2rem;
}
.tl-card__tag.live { background: var(--lime-soft); color: var(--lime-ink); }
.tl-card__tag.wait { background: var(--info-bg); color: var(--info); }
/* séance complète : slider en rouge, comme le vrai */
.tl-card.complete .tl-fill i { background: var(--danger); }
.tl-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--surface-2);
}
.tl-fill i {
  display: block;
  height: 100%;
  background: var(--cat);
}
.cat-lime   { --cat: var(--lime); }
.cat-sky    { --cat: var(--info); }
.cat-violet { --cat: var(--violet); }
.cat-amber  { --cat: var(--warn); }

/* légende catégories */
.tl-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tl-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: -0.03em;
}

/* ------------------------------------------------------------
   6. WORKFLOWS — éditeur de scénario
   ------------------------------------------------------------ */
.wf-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.4rem 0.2rem;
}
.wf-node {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.76rem;
}
.wf-node__ic {
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
}
.wf-node__ic .ic { width: 13px; height: 13px; }
.wf-node__tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.wf-node__label { font-weight: 600; line-height: 1.3; }
.wf-node--trigger {
  border-color: var(--lime-edge);
  background: linear-gradient(135deg, var(--lime-soft), var(--surface) 60%);
}
.wf-node--trigger .wf-node__ic { background: var(--lime); color: var(--on-lime); }
.wf-node--trigger .wf-node__tag { color: var(--lime-ink); }
.wf-node--email .wf-node__ic { background: var(--info-bg); color: var(--info); }
.wf-node--push  .wf-node__ic { background: var(--violet-bg); color: var(--violet); }
.wf-node--wait  .wf-node__ic { background: var(--warn-bg); color: var(--warn); }
.wf-node--stop  .wf-node__ic { background: var(--danger-bg); color: var(--danger); }
.wf-node--task  .wf-node__ic { background: var(--ok-bg); color: var(--ok); }
.wf-node__end {
  margin-left: auto;
  flex: none;
}
.wf-rail {
  width: 2px;
  height: 16px;
  margin-left: 1.6rem;
  background: linear-gradient(var(--line), var(--lime-edge));
}
.wf-rail--dashed {
  background: repeating-linear-gradient(var(--line) 0 3px, transparent 3px 6px);
}

/* statut d'exécution */
.wf-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
}
.wf-status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------
   7. PIPELINE PROSPECTS (marketing)
   ------------------------------------------------------------ */
.pipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  min-width: 560px;
}
.pipe-wrap { overflow-x: auto; }
.pipe-col__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 0.2rem 0.5rem;
}
.pipe-col__count {
  margin-left: auto;
  color: var(--lime-ink);
}
.pipe-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
}
.pipe-card__name { font-weight: 650; }
.pipe-card__src {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.pipe-card--hot { border-color: var(--lime-edge); }

/* ------------------------------------------------------------
   8. FICHE MEMBRE (CRM)
   ------------------------------------------------------------ */
.mp-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}
.mp-head .av { width: 44px; height: 44px; font-size: 0.85rem; }
.mp-head__name { font-size: 0.95rem; font-weight: 750; }
.mp-head__sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.15rem;
}
.mp-head__tags {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.mp-cell {
  padding: 0.7rem 0.95rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mp-cell:nth-child(3n) { border-right: none; }
.mp-cell__k {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mp-cell__v {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  margin-top: 0.25rem;
}
.mp-cell__v small {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-3);
}

/* timeline d'activité (fiche / feed) */
.feed { padding: 0.3rem 0; }
.feed-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 2.1rem;
  font-size: 0.74rem;
  color: var(--text-2);
}
.feed-item::before {
  content: "";
  position: absolute;
  left: 1.05rem; top: 0.85rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.feed-item--ok::before   { background: var(--ok); }
.feed-item--lime::before { background: var(--lime); }
.feed-item--warn::before { background: var(--warn); }
.feed-item--info::before { background: var(--info); }
.feed-item time {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-3);
  padding-top: 0.15rem;
}
.feed-item b { color: var(--text); font-weight: 650; }
.feed-item__txt { flex: 1; min-width: 0; }

/* ------------------------------------------------------------
   9. WELLPASS — contrôle de pass
   ------------------------------------------------------------ */
.wp-scan {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.95rem;
}
.wp-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
}
.wp-line__k { color: var(--text-3); }
.wp-line__ok {
  margin-left: auto;
  color: var(--ok);
  font-weight: 700;
}

/* ------------------------------------------------------------
   10. COMMUNITY — composants portés de l'app Business Entity
   (plaque de grade inclinée, flamme de streak, badges, classement)
   ------------------------------------------------------------ */
.rank-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 48px;
  padding: 3px 0;
  width: 100%;
  max-width: 280px;
}
.rank-bars {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding: 0 2px 0 0;
  align-items: stretch;
}
.rank-bars span {
  width: 6px;
  height: 100%;
  background: var(--rank-color);
  transform: skewX(-12deg);
  border-radius: 2px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--rank-color) 35%, transparent);
}
.rank-plate {
  position: relative;
  flex: 1;
  min-width: 0;
  transform: skewX(-12deg);
  background: color-mix(in srgb, var(--rank-color) 14%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--rank-color) 35%, transparent);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--rank-color) 15%, transparent), 0 4px 12px color-mix(in srgb, var(--rank-color) 12%, transparent);
}
.rank-plate-inner {
  transform: skewX(12deg);
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.rank-name {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rank-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: italic;
}
.rank-threshold-wrap { display: flex; align-items: baseline; gap: 4px; margin-left: auto; }
.rank-threshold {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--rank-color) 80%, var(--text-3));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-style: italic;
}
.rank-threshold-suffix { font-size: 0.58rem; font-weight: 500; color: var(--text-3); text-transform: lowercase; font-style: italic; }

.flame-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, #e0a112 20%, var(--bg)), color-mix(in oklab, #e0a112 6%, var(--bg)));
  border: 1.5px solid color-mix(in oklab, #e0a112 45%, transparent);
}
.flame-icon { font-size: 24px; line-height: 1; animation: communityFlameWiggle 2.2s ease-in-out infinite; }
@keyframes communityFlameWiggle {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .flame-icon { animation: none; } }
.flame-count { font-family: var(--mono); font-weight: 700; font-size: 18px; line-height: 1; color: var(--text); }
.flame-count small {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.flame-tier {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: #e0a112;
  color: #fff;
}

.badge-shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: 100%;
  max-width: 240px;
}
.badge-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.badge-cell.earned {
  background: linear-gradient(135deg, color-mix(in oklab, var(--lime) 16%, var(--surface)), var(--surface));
  border-color: var(--lime-edge);
  box-shadow: 0 4px 12px -6px var(--lime-edge);
}
.badge-cell.mystery {
  color: var(--text-3);
  font-family: var(--mono);
  font-weight: 700;
  border-style: dashed;
  font-size: 14px;
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  margin-top: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.72rem;
}
.leader-rank { font-family: var(--mono); font-weight: 700; font-size: 0.62rem; color: var(--text-3); width: 16px; flex: none; }
.leader-mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 8.5px;
  color: #fff;
}
.leader-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.leader-score { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--text-3); }

.console-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.console-line .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-bg);
}
.console-line .t { color: var(--text-3); }

.board { list-style: none; margin: 0; padding: 0; }
.board li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.76rem;
}
.board li:last-child { border-bottom: none; }
.board__pos {
  width: 20px; height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-2);
}
.board li.is-you {
  background: var(--lime-soft);
}
.board li.is-you .board__pos { background: var(--lime); color: var(--on-lime); }
.board__pts {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}

/* chips badges */
.chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
}
.chip .ic { width: 12px; height: 12px; color: var(--lime-ink); }

/* ------------------------------------------------------------
   10bis. STORY PHONE — la progression partagée en pub
   ------------------------------------------------------------ */
/* Smartphone incliné — même parti pris que les pages de présentation Community. */
.story-phone {
  width: 100%;
  max-width: 224px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  padding: 7px;
  background: #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-2);
  transform: rotate(-2deg);
}
/* La story garde son fond vibrant (grade-bg violet), quel que soit le thème de la page.
   --bg est resurchargé pour que la plaque de grade embarquée mixe ses couleurs
   avec le fond sombre de la story, pas celui de la page. */
.story-canvas {
  --bg: #16121f;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 0.95rem 0.85rem;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(139, 92, 246, 0.55), transparent 55%),
    linear-gradient(165deg, #191227, #0d0a14 62%, #221237);
}
.story-canvas__tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
.story-canvas__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.story-canvas__kicker {
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lime);
}
.story-canvas__rank {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}
.story-canvas__caption {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.story-canvas__handle {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.chip--net { border-color: var(--lime-edge); background: var(--lime-soft); color: var(--lime-ink); }
.story-note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: 10px;
  background: var(--lime-soft);
}
.story-note__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime-ink);
}
.story-note__text {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* ------------------------------------------------------------
   11. COACH-MARKS — annotations de l'exploration
   ------------------------------------------------------------ */
.explore {
  position: relative;
}
/* marqueur numéroté posé sur la fenêtre (coordonnées inline en %) */
.mark {
  position: absolute;
  z-index: 20;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 5px var(--lime-soft), 0 4px 14px -4px var(--lime-edge);
  animation: pulse-dot 2s ease-in-out infinite;
  transition: transform var(--t-fast);
}
.mark:hover, .mark.is-active { transform: scale(1.18); animation: none; box-shadow: 0 0 0 6px var(--lime-soft); }

/* panneau des annotations */
.callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: callout;
}
.callout {
  counter-increment: callout;
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.callout::before {
  content: counter(callout);
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  transition: background var(--t-fast), color var(--t-fast);
  margin-top: 0.1rem;
}
.callout:hover, .callout.is-active {
  border-color: var(--lime-edge);
  background: color-mix(in oklab, var(--lime-soft) 40%, var(--surface));
}
.callout:hover::before, .callout.is-active::before {
  background: var(--lime);
  color: var(--on-lime);
  border-color: var(--lime);
}
.callout__title {
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}
.callout__text {
  font-size: 0.78rem;
  color: var(--text-2);
  margin: 0;
}

/* disposition explorer : fenêtre pleine largeur, annotations en grille dessous */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
.explore-grid .callouts {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
  .explore-grid .callouts { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   12. VISITE GUIDÉE (index) — cartes modules « écrans »
   ------------------------------------------------------------ */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.tour-card:hover {
  transform: translateY(-4px);
  border-color: var(--lime-edge);
  box-shadow: 0 0 0 1px var(--lime-edge), var(--shadow-2);
}
.tour-card__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: color-mix(in oklab, var(--bg) 80%, var(--text) 4%);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.tour-card__bar .os-dots i { width: 7px; height: 7px; }
.tour-card__screen {
  padding: 0.9rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tour-card__body {
  padding: 1.1rem 1.2rem 1.25rem;
  border-top: 1px solid var(--line-soft);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tour-card__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.98rem;
  font-weight: 750;
  margin: 0 0 0.35rem;
}
.tour-card__title .ic { width: 16px; height: 16px; color: var(--lime-ink); }
.tour-card__text {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 0 0 1rem;
  flex: 1;
}
.tour-card__link {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-ink);
}

/* mini-composants pour les vignettes tour */
.mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
.mini-kpi {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}
.mini-kpi b {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-feature-settings: "tnum" 1;
}
.mini-kpi span {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
}
.mini-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: color-mix(in oklab, var(--lime) 40%, var(--surface-2));
}
.mini-bars i.hot { background: var(--lime); }
.mini-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
}
.mini-row .tag { font-size: 0.5rem; padding: 0.12rem 0.38rem; }
.mini-row__end { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; }

/* ------------------------------------------------------------
   13. RESPONSIVE ÉCRANS
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .tour-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .os-side { display: none; }
  .os-body { min-height: 0; }
}

@media (max-width: 720px) {
  .scr-hero::after { width: 110px; height: 46px; opacity: 0.55; }
  .scr-pulse { gap: 0.8rem 1.2rem; }
  .tri-grid { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-row--3 { grid-template-columns: 1fr 1fr; }
  .tour-grid { grid-template-columns: 1fr; }
  .mp-grid { grid-template-columns: 1fr 1fr; }
  .mp-cell:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .mp-cell:nth-child(2n) { border-right: none; }
  .os-screen { padding: 0.8rem 0.75rem 1rem; }
  .os-user__name { display: none; }
  /* les marqueurs restent utilisables mais plus petits */
  .mark { width: 22px; height: 22px; font-size: 0.6rem; }
}

@media (max-width: 480px) {
  .kpi-row, .kpi-row--3 { grid-template-columns: 1fr 1fr; }
  .os-search { display: none; }
}

/* ------------------------------------------------------------
   CALENDRIER — grille hebdomadaire
   Reprend la disposition réelle de /plannings/index : barre de filtres,
   navigation par semaine, grille 7 jours × heures, et rail de création
   à droite où l'on glisse une catégorie sur le calendrier.
   ------------------------------------------------------------ */
.cal-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.cal-bar__eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 0.2rem;
}
.cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.72rem;
  color: var(--text-2);
}
.cal-pill b { color: var(--text); font-weight: 600; }
.cal-pill .ic { width: 13px; height: 13px; }

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.cal-nav__arrows { display: inline-flex; gap: 0.25rem; }
.cal-nav__arrow {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.75rem;
}
.cal-nav__range {
  margin: 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cal-wrap { display: grid; grid-template-columns: 1fr 168px; gap: 0.7rem; align-items: start; }

.cal {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.cal__head {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.cal__day {
  padding: 0.3rem 0.2rem;
  text-align: center;
  font-size: 0.63rem;
  line-height: 1.25;
  color: var(--text-2);
  border-left: 1px solid var(--line-soft);
}
.cal__day:first-child { border-left: none; }
.cal__day b { display: block; font-size: 0.68rem; color: var(--text); font-weight: 700; }
.cal__day--today { background: var(--lime-soft); }

.cal__body {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  grid-auto-rows: 46px;
  position: relative;
  overflow: hidden;
}
/* Une cellule peut porter deux séances simultanées : elles se partagent
   la largeur du jour, comme dans le vrai planning. */
.cal-cell { display: flex; gap: 1px; align-items: stretch; z-index: 1; min-width: 0; overflow: hidden; }
.cal-cell > .cal-ev { flex: 1 1 0; min-width: 0; margin: 1px 0; }
.cal__hour {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--text-3);
  padding: 0.12rem 0.25rem 0 0;
  text-align: right;
  border-top: 1px solid var(--line-soft);
}
.cal__slot { border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.cal__slot--today { background: var(--lime-soft); }

.cal-ev {
  margin: 1px 2px;
  padding: 0.14rem 0.26rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  border-left: 3px solid #3F51B5;
  background: var(--surface);
  font-size: 0.56rem;
  line-height: 1.3;
  overflow: hidden;
  z-index: 1;
}
.cal-ev b {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 700;
}
.cal-ev span { display: block; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev em { font-style: normal; float: right; color: var(--text-2); font-weight: 600; font-family: var(--mono); font-size: 0.53rem; }
.cal-ev time { display: block; font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); }
.cal-ev--open { border-left-color: #A8A29E; }
.cal-ev--mobilite { border-left-color: #7A8B99; }
.cal-ev--pilates { border-left-color: #6B8F71; }
.cal-ev--full em { color: var(--danger); }
.cal-ev--cancel {
  background: rgba(239, 68, 68, 0.08);
  border-left-color: var(--danger);
}
.cal-ev--cancel b, .cal-ev--cancel span { color: var(--danger); }

.cal-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.15rem;
}
.cal-rail__hint { font-size: 0.62rem; color: var(--text-3); margin: 0 0 0.5rem; }
.cal-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.45rem;
  margin-bottom: 0.32rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: 7px;
  background: var(--surface);
  font-size: 0.62rem;
}
.cal-chip__name {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
}
.cal-chip__dur { display: block; font-family: var(--mono); font-size: 0.53rem; color: var(--text-3); }
.cal-chip__pl { margin-left: auto; font-family: var(--mono); font-size: 0.55rem; color: var(--text-3); }
.cal-chip--hyrox { border-left-color: var(--info); }
.cal-chip--haltero { border-left-color: var(--violet); }
.cal-chip--open { border-left-color: var(--warn); }
.cal-chip--pilates { border-left-color: var(--lime-ink); }

@media (max-width: 900px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal__body { grid-auto-rows: 42px; }
}

/* ------------------------------------------------------------
   PROSPECTION — bandeau de page et kanban
   Reprend /crm/prospects : bandeau lime avec le titre en capitales,
   rangée `// ACTIONS`, puis colonnes portant les noms de stades
   réellement configurés par la salle.
   ------------------------------------------------------------ */
.pg-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(100deg, var(--lime-soft), var(--surface) 62%);
  padding: 0.7rem 0.9rem 0.75rem;
  margin-bottom: 0.7rem;
}
.pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--scan) 3px 4px);
}
.pg-hero__wedge {
  position: absolute;
  top: -12px; right: -30px;
  width: 150px; height: 52px;
  background: var(--lime);
  opacity: 0.85;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.pg-hero__title {
  position: relative;
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.pg-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* force la suite des actions sur une nouvelle ligne (filtres de période sous leur libellé) */
.pg-actions__break { flex-basis: 100%; height: 0; }
.pg-actions__eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-right: 0.35rem;
  border-right: 1px solid var(--line);
  margin-right: 0.15rem;
}
.pg-actions__spacer { margin-left: auto; }

.kb { display: flex; gap: 0.5rem; align-items: flex-start; overflow: hidden; }
.kb-col { flex: 1 1 0; min-width: 0; }
.kb-col__head {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-height: 2.1em;
  margin-bottom: 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.kb-col__name {
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.kb-col__add {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--lime-ink);
  margin-left: auto;
  white-space: nowrap;
}
.kb-card {
  display: block;
  padding: 0.42rem 0.5rem 0.36rem;
  margin-bottom: 0.34rem;
  border-radius: 6px;
  border-left: 3px solid var(--text-3);
  background: var(--surface-2);
  color: var(--text-2);
}
.kb-card b {
  display: block;
  font-size: 0.63rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-card span {
  display: block;
  text-align: right;
  font-size: 0.6rem;
  color: var(--text-3);
}
.kb-card--new { background: rgba(234, 179, 8, 0.12); border-left-color: #eab308; }
.kb-card--new b { color: var(--warn); }
.kb-card--late { background: rgba(239, 68, 68, 0.09); border-left-color: var(--danger); }
.kb-card--late b, .kb-card--late span { color: var(--danger); }
.kb-card--ok { background: rgba(34, 197, 94, 0.1); border-left-color: #22c55e; }
.kb-card--ok b { color: var(--ok); }
.kb-col__empty {
  border: 1px dashed var(--line);
  border-radius: 7px;
  padding: 0.42rem 0.5rem;
  font-size: 0.6rem;
  color: var(--text-3);
  text-align: center;
}

/* ------------------------------------------------------------
   TABLEAU DE BORD — bandeau « à traiter »
   Reprend la rangée d'onglets du vrai /dashboard : un onglet actif encadré,
   puis les files d'attente avec leur pastille de couleur et leur compteur.
   ------------------------------------------------------------ */
.trg {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-soft);
}
.trg__eyebrow {
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  width: 100%;
  margin-bottom: 0.35rem;
}
.trg__eyebrow b { color: var(--text-2); }
.trg-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.trg-tab--on {
  background: var(--surface);
  border-color: var(--lime-edge);
  color: var(--lime-ink);
  font-weight: 700;
}
.trg-tab i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}
.trg-tab--danger i { background: var(--danger); }
.trg-tab--warn i   { background: var(--warn); }
.trg-tab--info i   { background: var(--info); }
.trg-tab--violet i { background: var(--violet); }
.trg-tab__n {
  min-width: 15px;
  padding: 0 0.2rem;
  border-radius: 20px;
  background: var(--danger);
  color: #fff;
  font-size: 0.53rem;
  line-height: 15px;
  text-align: center;
}
.trg-tab--warn .trg-tab__n { background: var(--warn); color: #4a3200; }
.trg__seen {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-ink);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   TABLEAU DE BORD — frise du jour et entraînement du jour
   Calqués sur /dashboard : les séances simultanées s'empilent sur la
   frise, et le bloc « entraînement du jour » reprend ses phases numérotées.
   ------------------------------------------------------------ */
.dtl { position: relative; padding: 0.2rem 0 0.5rem; }
.dtl__axis { position: relative; height: 15px; margin-bottom: 0.35rem; }
.dtl__tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-3);
}
.dtl__lanes { position: relative; height: 106px; }
.dtl__rule {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
}
.dtl-ev {
  position: absolute;
  width: 74px;
  padding: 0.22rem 0.32rem 0.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid #3F51B5;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.04));
  overflow: hidden;
}
.dtl-ev__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dtl-ev__m { display: flex; align-items: baseline; gap: 0.2rem; font-size: 0.52rem; color: var(--text-3); }
.dtl-ev__m > :first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl-ev__c { flex: none; font-family: var(--mono); font-weight: 700; color: var(--text-2); }
.dtl-ev__bar { display: block; height: 2px; margin-top: 0.22rem; border-radius: 2px; background: var(--line); }
.dtl-ev__bar i { display: block; height: 100%; border-radius: 2px; background: var(--lime); }
.dtl-ev--open { border-left-color: #A8A29E; }
.dtl-ev--mobilite { border-left-color: #7A8B99; }
.dtl-ev--full .dtl-ev__c { color: var(--lime-ink); }
.dtl-ev--full .dtl-ev__bar i { background: var(--lime-ink); }
.dtl-ev--cancel {
  background: rgba(239, 68, 68, 0.09);
  border-left-color: var(--danger);
}
.dtl-ev--cancel .dtl-ev__n, .dtl-ev--cancel .dtl-ev__m, .dtl-ev--cancel .dtl-ev__c { color: var(--danger); }

.tdj__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.tdj__ic {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--lime-soft);
  color: var(--lime-ink);
  flex: none;
}
.tdj__ic .ic { width: 14px; height: 14px; }
.tdj__t { font-size: 0.8rem; font-weight: 700; line-height: 1.2; }
.tdj__t small {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-3);
}
.tdj__link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.tdj__tabs { display: flex; gap: 0.9rem; border-bottom: 1px solid var(--line); margin-bottom: 0.45rem; }
.tdj-tab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding-bottom: 0.4rem;
  font-size: 0.66rem;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tdj-tab i { width: 7px; height: 7px; border-radius: 50%; background: #A8A29E; flex: none; }
.tdj-tab b { font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tdj-tab--on { color: var(--text); border-bottom-color: var(--text); }
.tdj-tab--on i { background: #3F51B5; }
.tdj__label {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tdj__goal { margin: 0.15rem 0 0.45rem; font-size: 0.67rem; color: var(--text-2); }
.tdj__note {
  display: flex; gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--lime-edge);
  border-radius: 8px;
  background: var(--lime-soft);
  margin-bottom: 0.6rem;
}
.tdj__note .ic { width: 14px; height: 14px; color: var(--lime-ink); flex: none; margin-top: 1px; }
.tdj__note b {
  display: block;
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.tdj__note span { font-size: 0.68rem; color: var(--text-2); }
.tdj-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.9rem; }
.tdj-ph { border-top: 1px solid var(--line-soft); padding: 0.35rem 0 0.1rem; }
.tdj-ph__h { display: flex; align-items: baseline; gap: 0.4rem; }
.tdj-ph__n {
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
}
.tdj-ph__d { margin-left: auto; font-family: var(--mono); font-size: 0.55rem; color: var(--text-3); }
.tdj-ph__t { margin: 0.18rem 0 0.25rem; font-size: 0.64rem; line-height: 1.35; color: var(--text-2); }
.tdj-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--surface-2); margin: 0.1rem 0 0.35rem; }
.tdj-seg span {
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  font-size: 0.6rem;
  color: var(--text-3);
}
.tdj-seg span.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tdj-score {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.6rem;
  color: var(--text-3);
}
.tdj-score b { color: var(--text); font-weight: 700; }

@media (max-width: 760px) {
  .dtl__lanes { height: 88px; }
  .dtl-ev { width: 60px; }
}

/* Chips « entraînement du jour » du bandeau de tableau de bord */
.pstat--wide { grid-column: span 2; }
.pstat__chips { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.25rem; }
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.pchip i { width: 6px; height: 6px; border-radius: 50%; background: #3F51B5; flex: none; }
.pchip--grey i { background: #A8A29E; }
.pchip .dim { text-transform: none; letter-spacing: 0; color: var(--text-3); }


/* Écran de tableau de bord : réglages fins pour tenir dans le cadre 16:9
   sans rien couper. Le vrai logiciel a toute la hauteur d'un navigateur ;
   la vignette de la landing, elle, doit montrer la journée entière. */
.os-screen .scr-hero { padding-bottom: 0.5rem; }
.os-screen .scr-pulse { padding: 0.5rem 0 0.35rem; }
.os-screen .trg { margin-top: 0.35rem; padding-top: 0.4rem; }
.os-screen .trg__eyebrow { margin-bottom: 0.25rem; }
.dtl__lanes { height: 88px; }
.dtl { padding: 0.15rem 0 0.3rem; }
.tdj-ph__t { margin-bottom: 0.15rem; }
.tdj-seg { margin: 0.05rem 0 0.25rem; }

/* Derniers ajustements pour que le tableau de bord tienne entier dans le 16:9. */
.os-screen .scr-hero__id { margin-bottom: 0.2rem; }
.os-screen .scr-hero__lede { margin-bottom: 0; }
.os-screen .pane__body { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.tdj__note { padding: 0.35rem 0.5rem; margin-bottom: 0.45rem; }
.tdj__head { margin-bottom: 0.35rem; }
.tdj-ph { padding-top: 0.3rem; }
.dtl__lanes { height: 84px; }
.dtl__axis { height: 13px; margin-bottom: 0.25rem; }

.dtl-ev { width: 78px; }
.dtl-ev__m { font-size: 0.5rem; }
.dtl-ev__c { font-size: 0.53rem; }

/* ------------------------------------------------------------
   LISTES — barres de filtres et tableaux de données
   Reprend /crm/subscribers et /checkout/invoices : vues enregistrées en
   pastilles, barre d'outils avec export, puis un tableau dense.
   ------------------------------------------------------------ */
.fbar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-size: 0.76rem;
  color: var(--text-2);
  white-space: nowrap;
}
.fchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.fchip--on { background: var(--lime-soft); border-color: var(--lime-edge); color: var(--lime-ink); font-weight: 600; }
.fchip--danger i { background: var(--danger); }
.fchip--warn i { background: var(--warn); }
.fchip--info i { background: var(--info); }
.fchip--ghost { border-style: dashed; color: var(--text-3); }

.tbar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.tbar__seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.tbar__seg span { padding: 0.26rem 0.6rem; border-radius: 6px; font-size: 0.74rem; color: var(--text-3); }
.tbar__seg span.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tbar__search {
  flex: 1 1 150px;
  min-width: 110px;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.74rem;
  color: var(--text-3);
}
.tbar__csv { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--lime-ink); white-space: nowrap; }
.tbar__csv .ic { width: 13px; height: 13px; }
.tbar__count { font-size: 0.74rem; color: var(--text-3); margin: 0 0 0.45rem; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tbl th {
  padding: 0.42rem 0.5rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  /* en-têtes sur deux lignes plutôt qu'une dernière colonne coupée */
  white-space: normal;
  vertical-align: bottom;
}
.tbl td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-family: var(--mono); }
.tbl .who { display: flex; align-items: center; gap: 0.55rem; }
.tbl .who b { display: block; color: var(--text); font-weight: 600; }
.tbl .who small { display: block; font-size: 0.68rem; color: var(--text-3); }
.tbl__av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-3);
  flex: none;
}
.tbl__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 0.74rem;
  color: var(--text-2);
}
.pill--pay { font-family: var(--mono); font-size: 0.7rem; }
.st { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.st--wait { color: var(--warn); }
.st--wait i { background: #eab308; }
.st--fail { color: var(--danger); }
.st--fail i { background: var(--danger); }

/* ------------------------------------------------------------
   ÉDITEUR DE WORKFLOW
   Reprend l'éditeur réel de /settings/workflows : bloc déclencheur en tête,
   connecteurs « + », puis des cartes d'étape à liseré coloré portant leur
   type, leur décalage et leur audience.
   ------------------------------------------------------------ */
.wfe { display: grid; gap: 0.28rem; justify-items: stretch; }
.wfe__trigger {
  border-radius: 9px;
  background: linear-gradient(100deg, var(--lime), color-mix(in oklab, var(--lime) 72%, #7aa300));
  padding: 0.55rem 0.7rem;
  color: #1a2200;
}
.wfe__trigger b {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  margin-bottom: 0.28rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 0.53rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wfe__trigger span { display: block; font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.wfe__after {
  justify-self: center;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.wfe__plus {
  justify-self: center;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.62rem;
  color: var(--text-3);
  line-height: 1;
}
.wfe-step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: 8px;
  background: var(--surface);
}
.wfe-step__ic {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: color-mix(in oklab, var(--info) 14%, var(--surface));
  color: var(--info);
  flex: none;
}
.wfe-step__ic .ic { width: 12px; height: 12px; }
.wfe-step__meta { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.12rem; }
.wfe-step__kind {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--info);
}
.wfe-step__aud {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 0.52rem;
  color: var(--text-3);
}
.wfe-step__t { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.wfe-step__s { display: block; font-size: 0.6rem; color: var(--text-3); }
.wfe-step--mail { border-left-color: var(--indigo); }
.wfe-step--mail .wfe-step__ic { background: color-mix(in oklab, var(--indigo) 14%, var(--surface)); color: var(--indigo); }
.wfe-step--mail .wfe-step__kind { color: var(--indigo); }
.wfe-step--wait { border-left-color: var(--text-3); }
.wfe-step--wait .wfe-step__ic { background: var(--surface-2); color: var(--text-3); }
.wfe-step--wait .wfe-step__kind { color: var(--text-3); }
.wfe-step--stop { border-left-color: var(--danger); }
.wfe-step--stop .wfe-step__ic { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
.wfe-step--stop .wfe-step__kind { color: var(--danger); }
.wfe-step--task { border-left-color: var(--warn); }
.wfe-step--task .wfe-step__ic { background: color-mix(in oklab, var(--warn) 16%, var(--surface)); color: var(--warn); }
.wfe-step--task .wfe-step__kind { color: var(--warn); }
/* SMS : rose, comme la carte SMS du designer réel */
.wfe-step--sms { border-left-color: #ec4899; }
.wfe-step--sms .wfe-step__ic { background: color-mix(in oklab, #ec4899 14%, var(--surface)); color: #ec4899; }
.wfe-step--sms .wfe-step__kind { color: var(--pink); }
/* numéro d'étape posé sur le liseré, comme dans le canevas */
.wfe-step { position: relative; }
.wfe-step__n {
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--info);
  color: var(--bg);  /* sombre sur pastille vive en dark, clair en light */
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
}
.wfe-step--mail .wfe-step__n { background: var(--indigo); }
.wfe-step--sms .wfe-step__n { background: #ec4899; }
.wfe-step--stop .wfe-step__n { background: var(--danger); }
.wfe-step--task .wfe-step__n { background: #b8891a; }
/* séparateur « Autour de la séance » : les étapes suivantes se calent sur la séance réservée */
.wfe__sep {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.15rem 0;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--info);
}
.wfe__sep::before, .wfe__sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wfe__sep span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid color-mix(in oklab, var(--info) 45%, transparent);
  border-radius: 20px;
  background: color-mix(in oklab, var(--info) 10%, var(--surface));
}
.wfe__sep .ic { width: 10px; height: 10px; }
/* la séance elle-même, repère bleu entre les étapes « avant » et « après » */
.wfe__occ {
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(100deg, #2563eb, #3b82f6);
  color: #fff;
}
.wfe__occ b {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  margin-bottom: 0.2rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wfe__occ span { display: block; font-size: 0.7rem; font-weight: 700; }
.wfe__occ small { display: block; font-size: 0.58rem; opacity: 0.85; }

/* ------------------------------------------------------------
   DÉROULÉ D'UNE EXÉCUTION
   Reprend le tiroir de /settings/workflows/activity : statut, contact,
   repères de dates, puis les étapes datées avec leur état, la séance
   réservée intercalée à sa place dans le temps.
   ------------------------------------------------------------ */
.xr { display: grid; gap: 0.55rem; }
.xr__top { display: flex; align-items: center; justify-content: space-between; }
.xr__status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--warn) 50%, transparent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--warn) 14%, var(--surface));
  color: var(--warn);
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.xr__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.8s ease-in-out infinite; }
.xr__id { font-family: var(--mono); font-size: 0.56rem; color: var(--text-3); }
.xr__who { display: flex; align-items: center; gap: 0.55rem; }
.xr__who b { display: block; font-size: 0.78rem; color: var(--text); }
.xr__who small { display: block; font-size: 0.6rem; color: var(--text-3); }
.xr__meta {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.xr__meta div { padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--line-soft); }
.xr__meta div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.xr__meta div:nth-last-child(-n+2) { border-bottom: none; }
.xr__meta span {
  display: block;
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.xr__meta b { display: block; font-size: 0.64rem; color: var(--text); font-weight: 600; }
.xr__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.xr__head::after { content: ""; flex: 1; height: 1px; background: var(--line); order: 1; }
.xr__head em { order: 2; font-style: normal; }
.xtl { display: grid; gap: 0.45rem; position: relative; }
.xtl::before {
  content: ""; position: absolute;
  left: 11px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}
.xtl__i { display: grid; grid-template-columns: 23px 1fr auto; gap: 0.5rem; align-items: start; position: relative; }
.xtl__ic {
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, #14b8a6 45%, transparent);
  background: var(--surface);
  color: #14b8a6;
}
.xtl__ic .ic { width: 11px; height: 11px; }
.xtl__i--trigger .xtl__ic { border-color: var(--lime-edge); color: var(--lime-ink); background: var(--lime-soft); }
.xtl__i--sms .xtl__ic { border-color: color-mix(in oklab, #ec4899 45%, transparent); color: #ec4899; }
.xtl__i--stop .xtl__ic { border-color: color-mix(in oklab, var(--danger) 45%, transparent); color: var(--danger); }
.xtl__i--task .xtl__ic { border-color: color-mix(in oklab, var(--warn) 50%, transparent); color: var(--warn); }
.xtl__t { display: block; font-size: 0.66rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.xtl__s { display: block; font-size: 0.58rem; color: var(--text-3); }
.xtl__s b { color: var(--text-2); font-weight: 600; }
.xtl__at { font-family: var(--mono); font-size: 0.54rem; color: var(--text-3); white-space: nowrap; padding-top: 0.1rem; }
.xtl__st {
  display: inline-block;
  margin-top: 0.22rem;
  padding: 0.06rem 0.38rem;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.xtl__st--done { color: var(--ok); background: color-mix(in oklab, var(--ok) 13%, var(--surface)); border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent); }
.xtl__st--sched { color: var(--info); background: color-mix(in oklab, var(--info) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--info) 35%, transparent); }
.xtl__occ {
  grid-column: 2 / 4;
  border-radius: 8px;
  padding: 0.42rem 0.6rem;
  background: linear-gradient(100deg, #2563eb, #3b82f6);
  color: #fff;
}
.xtl__occ-top { display: flex; justify-content: space-between; align-items: center; }
.xtl__occ-top span { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.xtl__occ-top em { font-style: normal; font-family: var(--mono); font-size: 0.5rem; padding: 0.05rem 0.35rem; border-radius: 4px; background: rgba(255,255,255,0.22); }
.xtl__occ b { display: block; font-size: 0.72rem; margin-top: 0.1rem; }
.xtl__occ small { display: block; font-family: var(--mono); font-size: 0.54rem; opacity: 0.9; }
.xtl__i--occ .xtl__ic { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ------------------------------------------------------------
   FACTURES — sélecteur de période, histogramme et ventilation
   Reprend /checkout/invoices.
   ------------------------------------------------------------ */
.per { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.per__l {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  width: 46px;
  flex: none;
}
.per__c {
  padding: 0.16rem 0.42rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--text-2);
}
.per__c--on { border-color: var(--lime-edge); background: var(--lime-soft); color: var(--lime-ink); font-weight: 600; }
.per__c--mute { color: var(--text-3); }

.rev { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.8rem; align-items: stretch; }
.rev__chart { display: flex; align-items: flex-end; gap: 3px; height: 118px; padding-top: 0.7rem; }
.rev__chart i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: #3F51B5;
  min-height: 2px;
}
/* Encaissements à venir : même colonne, remplissage évidé. Le gérant lit son
   prévisionnel du mois sans le confondre avec ce qui est déjà rentré. */
.rev__chart i.soon {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, #3F51B5 26%, var(--surface)) 0 3px,
    var(--surface) 3px 6px);
  border: 1px solid color-mix(in oklab, #3F51B5 34%, var(--surface));
  border-bottom: none;
}
.rev__chart i.neg { background: color-mix(in oklab, var(--danger) 70%, var(--surface)); }
.rev__today { position: relative; flex: 0 0 1px; align-self: stretch; background: var(--lime-ink); }
.rev__today::after {
  content: "auj.";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--lime-ink);
}
.rev__legend { display: flex; gap: 0.7rem; margin-top: 0.3rem; font-size: 0.62rem; color: var(--text-3); }
.rev__legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.rev__legend i { width: 9px; height: 9px; border-radius: 2px; background: #3F51B5; }
.rev__legend i.soon {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, #3F51B5 26%, var(--surface)) 0 3px,
    var(--surface) 3px 6px);
  border: 1px solid color-mix(in oklab, #3F51B5 34%, var(--surface));
}
.rev__x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.55rem; color: var(--text-3); margin-top: 0.2rem; }
.rev__sum { border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.6rem; background: var(--surface-2); }
.rev__tot { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem; }
.rev__tot span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.rev__tot b { font-size: 1rem; font-weight: 800; }
.rev__line { display: flex; align-items: center; gap: 0.4rem; padding: 0.16rem 0; font-size: 0.7rem; color: var(--text-2); }
.rev__line i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rev__line b { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--text); }

/* ------------------------------------------------------------
   Page dans une seule carte
   Sur /crm/subscribers, tout tient dans une carte unique dont le bandeau
   teinté forme l'en-tête : filtres, barre d'outils et tableau partagent la
   même surface. On reproduit ce découpage plutôt que d'empiler des blocs.
   ------------------------------------------------------------ */
.pg-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.04));
  overflow: hidden;
}
.pg-card > .pg-hero {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 0;
}
.pg-card__body { padding: 0.7rem 0.85rem 0.85rem; }

/* ------------------------------------------------------------
   CLASSEMENTS COMMUNITY
   Reprend /community/dashboard : sélecteur de portée, onglets, podium des
   séances à vie, puis les adhérents regroupés par niveau.
   ------------------------------------------------------------ */
.lb-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.4rem; }
.lb-scope__l {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lb-scope a, .lb-scope span.opt {
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
}
.lb-scope .on { color: var(--lime-ink); border-color: var(--lime-edge); background: var(--lime-soft); }
.lb-scope__hint { flex-basis: 100%; font-size: 0.65rem; color: var(--text-3); }

.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.1rem; padding: 0.35rem 0 0.2rem; }
.lb-pod { flex: 1; max-width: 190px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.lb-pod__av {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: visible;
  margin-bottom: 0.4rem;
}
.lb-pod--1 .lb-pod__av { width: 64px; height: 64px; }
.lb-pod__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lb-pod__medal {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 800;
  border: 2px solid var(--surface);
}
.lb-pod--1 .lb-pod__medal { background: #ffd76a; color: #4a3600; }
.lb-pod--2 .lb-pod__medal { background: #d5dce6; color: #333c47; }
.lb-pod--3 .lb-pod__medal { background: #d9955b; color: #3d2408; }
.lb-pod__name { font-weight: 700; font-size: 0.76rem; margin-bottom: 0.25rem; }
.lb-pod__badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--rank-color, var(--lime)) 40%, transparent);
  background: color-mix(in srgb, var(--rank-color, var(--lime)) 14%, var(--surface));
  color: color-mix(in srgb, var(--rank-color, var(--lime)) 70%, var(--text));
}
.lb-pod__base { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--text-3); margin-top: 0.2rem; }
.lb-group { display: grid; gap: 0.1rem; }
.lb-group__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.lb-group__chev { color: var(--text-3); font-size: 0.7rem; flex: none; padding-left: 0.4rem; }
/* Le compteur et le chevron doivent tenir dans la carte : la plaque cède. */
.lb-group .rank-card { width: 100%; align-items: center; }
/* La plaque est inclinée : elle déborde de sa boîte, d'où la marge. */
.lb-group .rank-plate { flex: 1 1 0; min-width: 0; margin-right: 12px; }
.lb-group__count, .lb-group__chev { flex: none; align-self: center; }

.pg-card__body > .pane { border: none; box-shadow: none; background: transparent; }
.pg-card__body > .pane > .pane__body { padding-left: 0; padding-right: 0; }
.pg-card__body > .scr-sec:first-child { margin-top: 0; }

/* ------------------------------------------------------------
   COMMUNITY — derniers niveaux atteints et cadeaux
   La ligne de cadeau reprend celle du produit : avatar, nom, « 🎁 récompense
   · code », puis l'état à droite (à remettre, remis, en attente du client).
   ------------------------------------------------------------ */
.chp { display: grid; gap: 0.3rem; }
.chp-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; }
.chp-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-3);
}
.chp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chp-body { min-width: 0; flex: 1; }
.chp-name { display: block; font-size: 0.74rem; font-weight: 600; color: var(--text); }
.chp-sub { display: block; font-size: 0.66rem; color: var(--text-3); }
.chp-sub b { color: var(--text-2); font-weight: 600; }
.chp-code {
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-2);
}
.chp-right { margin-left: auto; flex: none; text-align: right; }
.chp-state { font-size: 0.64rem; color: var(--text-3); white-space: nowrap; }
.chp-btn {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 6px;
  background: var(--lime);
  color: #1a2200;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chp-when { display: block; font-family: var(--mono); font-size: 0.6rem; color: var(--text-3); }

/* Community : la page porte beaucoup de blocs — on resserre pour que la
   mise à l'échelle reste lisible plutôt que de gagner en hauteur perdue. */
.lb-pod__av { width: 46px; height: 46px; margin-bottom: 0.3rem; }
.lb-pod--1 .lb-pod__av { width: 56px; height: 56px; }
.lb-podium { gap: 0.9rem; padding: 0.2rem 0 0.1rem; }
.lb-pod__name { font-size: 0.72rem; margin-bottom: 0.2rem; }
.lb-pod__base { font-size: 0.62rem; margin-top: 0.15rem; }
.lb-scope { margin: 0.4rem 0 0.3rem; }
.lb-scope__hint { margin-top: -0.1rem; }
.chp-row { padding: 0.2rem 0; }

.scr-hero--tight .scr-hero__lede { display: none; }
.scr-hero--tight + .lb-scope .lb-scope__hint { display: none; }
.lb-group .rank-card { min-height: 34px; }

/* ------------------------------------------------------------
   Badge de rang Community
   Reprise à l'identique du composant du produit
   (resources/views/components/community/rank-badge.blade.php) : deux barres
   inclinées, une plaque teintée, l'icône du grade et le nombre de séances.
   ------------------------------------------------------------ */
.community-rank-badge {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  vertical-align: middle;
  --rank-color: #94a3b8;
  white-space: nowrap;
}
.community-rank-badge .crb-bars { display: flex; gap: 2px; align-items: stretch; flex: none; }
.community-rank-badge .crb-bars span {
  width: 3px;
  background: var(--rank-color);
  transform: skewX(-12deg);
  border-radius: 1px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--rank-color) 35%, transparent);
}
.community-rank-badge .crb-plate {
  display: flex;
  align-items: center;
  min-width: 61px;
  transform: skewX(-12deg);
  background: color-mix(in srgb, var(--rank-color) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--rank-color) 35%, transparent);
  border-left: 0;
  border-radius: 4px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--rank-color) 15%, transparent);
}
.community-rank-badge .crb-plate-inner {
  transform: skewX(12deg);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px 0 7px;
  width: 100%;
  justify-content: space-between;
}
.community-rank-badge .community-grade-icon {
  width: 13px; height: 13px;
  display: block;
  color: var(--rank-color);
  flex: none;
}
.community-rank-badge .crb-count {
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--rank-color) 50%, var(--text));
}
/* Podium logé dans la colonne des niveaux : trois lignes plutôt qu'une estrade. */
.lb-podium--col { display: grid; gap: 0.3rem; }
.lb-podium--col .lb-pod {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
  text-align: left;
  padding: 0.22rem 0;
}
.lb-podium--col .lb-pod__av,
.lb-podium--col .lb-pod--1 .lb-pod__av { width: 30px; height: 30px; margin-bottom: 0; }
.lb-podium--col .lb-pod__medal { width: 16px; height: 16px; font-size: 0.52rem; right: -4px; bottom: -4px; }
.lb-podium--col .lb-pod__name { flex: 1; min-width: 0; margin: 0; font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; }
.lb-podium--col .lb-pod__base { display: none; }

/* ------------------------------------------------------------
   PROGRAMMATION — éditeur de la semaine
   Reprend /trainings/program/{id} : sept colonnes de jours, chaque
   entraînement en carte avec sa description et ses phases numérotées.
   ------------------------------------------------------------ */
.prg-bar { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.prg-bar__month { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.prg-bar__week { font-size: 0.85rem; font-weight: 600; color: var(--text-2); border-left: 1px solid var(--line); padding-left: 0.6rem; }
.prg-bar__nav { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.4rem; font-size: 0.7rem; color: var(--text-2); }
.prg-bar__copy { margin-left: auto; font-size: 0.72rem; color: var(--lime-ink); }
.prg-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.prg-day__h {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-2);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prg-day__h--today { color: var(--lime-ink); border-bottom-color: var(--lime-edge); }
.prg-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  margin-bottom: 0.35rem;
  overflow: hidden;
}
.prg-card--on { border-color: var(--lime-edge); box-shadow: 0 0 0 2px var(--lime-soft); }
.prg-card__t {
  padding: 0.3rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.prg-card__t small { display: block; font-weight: 500; color: var(--text-3); }
.prg-ph { padding: 0.28rem 0.4rem; border-top: 1px solid var(--line-soft); }
.prg-ph:first-of-type { border-top: none; }
.prg-ph__n {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-2);
}
.prg-ph__n .ic { width: 10px; height: 10px; color: var(--lime-ink); }
.prg-ph__t { margin: 0.1rem 0 0; font-size: 0.57rem; line-height: 1.35; color: var(--text-3); }

/* ------------------------------------------------------------
   CAISSE — démonstration interactive
   Reprend /checkout/sell : familles de produits en pastilles, liste des
   produits, récapitulatif à droite. Ici les clics fonctionnent : c'est le
   plus court chemin pour montrer qu'enregistrer une vente prend trois gestes.
   ------------------------------------------------------------ */
.til { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.7rem; align-items: start; }
.til-fam { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.til-fam button {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}
.til-fam button.on { background: var(--lime); border-color: var(--lime); color: #1a2200; font-weight: 700; }
.til-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.til-p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast);
}
.til-p:last-child { border-bottom: none; }
.til-p:hover, .til-p:focus-visible { background: var(--lime-soft); outline: none; }
.til-p__img {
  width: 40px; height: 30px;
  border-radius: 5px;
  flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2b3340, #4a5568);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
}
.til-p__b { min-width: 0; flex: 1; }
.til-p__n { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--text); }
.til-p__s { display: block; font-size: 0.7rem; color: var(--text-3); }
.til-price {
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: color-mix(in oklab, var(--lime) 22%, var(--surface));
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--lime-ink);
  white-space: nowrap;
}
.til-tag {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--violet);
  border-radius: 20px;
  font-size: 0.62rem;
  color: var(--violet);
}
.til-cart { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0.6rem 0.7rem; }
.til-cart__h { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.til-cart__h .ic { width: 15px; height: 15px; color: var(--text-2); }
.til-cart__t { font-size: 0.8rem; font-weight: 700; line-height: 1.2; }
.til-cart__t small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-3); }
.til-cart__clear {
  margin-left: auto;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.68rem;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
}
.til-empty { padding: 1.4rem 0; text-align: center; color: var(--text-3); }
.til-empty .ic { width: 26px; height: 26px; opacity: 0.5; }
.til-empty b { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-2); margin-top: 0.4rem; }
.til-empty span { font-size: 0.7rem; }
.til-line { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.76rem; }
.til-line b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.til-line__q { font-family: var(--mono); font-size: 0.68rem; color: var(--text-3); }
.til-line__p { font-family: var(--mono); font-weight: 700; }
.til-line__x { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0.15rem; }
.til-total { display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 0 0.35rem; }
.til-total span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.til-total b { font-size: 1.15rem; font-weight: 800; }
.til-field {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.36rem 0.55rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.74rem;
  color: var(--text-3);
}
.til-field .ic { width: 13px; height: 13px; }
.til-field.filled { color: var(--text); background: var(--surface); }
.til-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 0.4rem 0 0.25rem; }
.til-go {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 9px;
  background: color-mix(in oklab, var(--lime) 45%, var(--surface));
  color: color-mix(in oklab, #1a2200 55%, var(--text-3));
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: not-allowed;
  margin-top: 0.4rem;
}
.til-go.ready { background: var(--lime); color: #1a2200; cursor: pointer; }
.til-done {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--lime-edge);
  border-radius: 9px;
  background: var(--lime-soft);
  font-size: 0.74rem;
  color: var(--lime-ink);
}
.til-done b { display: block; font-weight: 700; }
@media (max-width: 760px) { .til { grid-template-columns: 1fr; } }

/* La caisse garde la même hauteur d'une famille de produits à l'autre :
   sans cela l'écran saute à chaque changement d'onglet. */
.til-list { min-height: 470px; }
.til-cart { min-height: 470px; display: flex; flex-direction: column; }
.til-cart [data-til-body] { flex: 1; }


/* ------------------------------------------------------------
   Podium — vraie estrade
   Deuxième à gauche, premier au centre sur la marche haute, troisième à
   droite. Les hauteurs de marche disent le classement avant qu'on lise
   les chiffres.
   ------------------------------------------------------------ */
.lb-stage {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: end;
  gap: 0.35rem;
  padding-top: 0.2rem;
}
.lb-stage__c { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lb-stage__av {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  margin-bottom: 0.28rem;
}
.lb-stage__c--1 .lb-stage__av { width: 50px; height: 50px; }
.lb-stage__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lb-stage__medal {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 800;
  border: 2px solid var(--surface);
}
.lb-stage__c--1 .lb-stage__medal { background: #ffd76a; color: #4a3600; }
.lb-stage__c--2 .lb-stage__medal { background: #d5dce6; color: #333c47; }
.lb-stage__c--3 .lb-stage__medal { background: #d9955b; color: #3d2408; }
.lb-stage__n {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.22rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-stage__badge { margin-bottom: 0.3rem; }
.lb-stage__block {
  width: 100%;
  border-radius: 7px 7px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 800;
}
.lb-stage__c--1 .lb-stage__block {
  height: 52px;
  background: linear-gradient(180deg, color-mix(in oklab, #ffd76a 42%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #ffd76a 55%, transparent);
  color: var(--warn);
}
.lb-stage__c--2 .lb-stage__block {
  height: 36px;
  background: linear-gradient(180deg, color-mix(in oklab, #d5dce6 55%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #98a4b4 45%, transparent);
  color: #55616f;
}
.lb-stage__c--3 .lb-stage__block {
  height: 24px;
  background: linear-gradient(180deg, color-mix(in oklab, #d9955b 42%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #d9955b 50%, transparent);
  color: #8a5a2a;
}
.lb-stage__floor { height: 2px; background: var(--line); border-radius: 2px; margin-top: -1px; }

/* ------------------------------------------------------------
   NEWSLETTERS — tableau de bord /communication/newsletters, éditeur, assistant d'envoi, app adhérent
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   NEWSLETTERS — tableau de bord, éditeur, diffusion avancée, app
   Reprend /communication/newsletters : bandeau, 4 KPI (envois,
   taux d'ouverture e-mail / in-app, publications en attente,
   prochain envoi), liste « Mes newsletters » à statuts par canal,
   colonne « Prochaines diffusions ».
   ------------------------------------------------------------ */

/* --- KPI --- */
.nl-kpis .kpi { display: flex; flex-direction: column; min-height: 118px; }
.nl-kpis .kpi__meta { margin-top: auto; padding-top: 0.3rem; }
.nl-kpi-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.3rem 0.4rem; }
.nl-kpi-head .tag { flex: none; margin-top: -0.15rem; }
.nl-kpi-date { font-size: 1.05rem; }

.nl-legend {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.35rem;
  font-size: 0.62rem;
  color: var(--text-3);
}
.nl-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.nl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.nl-dot--email, .nl-spark__email { --c: var(--lime); }
.nl-dot--app,   .nl-spark__app   { --c: var(--info); }
.nl-dot { background: var(--c); }
.nl-spark { width: 100%; height: 28px; margin-top: 0.3rem; overflow: visible; }
.nl-spark polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* anneau de taux d'ouverture (conic-gradient, --p en %) */
.nl-rings { display: inline-flex; align-self: flex-start; gap: 1rem; margin-top: 0.5rem; }
.nl-ring { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.nl-ring small { font-size: 0.6rem; color: var(--text-3); }
.nl-pie {
  --c: var(--lime);
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0);
}
.nl-pie::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--surface);
}
.nl-pie b {
  position: relative;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.nl-pie--email { --c: var(--lime); }
.nl-pie--app   { --c: var(--info); }
.nl-pie--sm { width: 36px; height: 36px; }
.nl-pie--sm::before { inset: 4px; }
.nl-pie--sm b { font-size: 0.54rem; }

.nl-stack {
  display: flex;
  height: 7px;
  margin-top: 0.5rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.nl-stack i { display: block; height: 100%; background: var(--warn); }

/* --- liste + prochaines diffusions --- */
.nl-main {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 0.8rem;
  align-items: start;
}
.nl-list { display: flex; flex-direction: column; }
.nl-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}
.nl-item:last-child { border-bottom: none; }
.nl-item__left { flex: 1; min-width: 0; }
.nl-item__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.nl-item__tags { display: inline-flex; gap: 0.35rem; }
.nl-item__name { font-size: 0.8rem; font-weight: 700; margin-right: 0.15rem; }
.nl-item__date { margin-top: 0.2rem; font-size: 0.66rem; color: var(--text-3); }
.nl-item__right { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.nl-item__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 62px;
  font-size: 0.64rem;
  color: var(--text-3);
}
.nl-item__metrics b { font-family: var(--mono); color: var(--text); font-feature-settings: "tnum" 1; }
.nl-kebab {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-3);
}
.nl-kebab .ic { width: 13px; height: 13px; }

.nl-side { display: flex; flex-direction: column; padding: 0.2rem 0.95rem 0.4rem; }
.nl-side__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line-soft);
}
.nl-side__item:first-child { border-top: none; }
.nl-side__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.nl-side__ic .ic { width: 14px; height: 14px; }
.nl-side__ic--email { background: var(--warn-bg); color: var(--warn); }
.nl-side__ic--app   { background: var(--info-bg); color: var(--info); }
.nl-side__body { display: flex; flex-direction: column; min-width: 0; }
.nl-side__name {
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl-side__meta { font-size: 0.64rem; color: var(--text-3); }
.nl-side__meta b { color: var(--text-2); }

@media (max-width: 720px) {
  .nl-main { grid-template-columns: 1fr; }
  .nl-item { flex-wrap: wrap; }
  .nl-item__left { flex-basis: calc(100% - 40px); }
  .nl-item__right { order: 3; margin-left: 0; }
  .nl-kebab { order: 2; }
}

/* --- éditeur (deep dive) --- */
.nl-ed__cols { display: grid; grid-template-columns: 1fr 190px; }
.nl-ed__main { min-width: 0; border-right: 1px solid var(--line-soft); }
.nl-ed__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.nl-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 5px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-2);
}
.nl-tool--on { background: var(--lime); color: var(--on-lime); }
.nl-tool--cta { background: var(--lime-soft); color: var(--lime-ink); border: 1px solid var(--lime-edge); }
.nl-align { display: block; width: 12px; height: 9px; }
.nl-align--l { background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 65% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 85% 2px no-repeat; }
.nl-align--c { background: linear-gradient(currentColor 0 0) 50% 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 50% 50% / 60% 2px no-repeat, linear-gradient(currentColor 0 0) 50% 100% / 80% 2px no-repeat; }
.nl-ed__sep { width: 1px; height: 16px; background: var(--line); margin: 0 0.2rem; }
.nl-ed__doc { padding: 0.9rem 1.1rem 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-2); }
.nl-ed__doc p { margin: 0 0 0.5rem; }
.nl-ed__doc ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.nl-ed__h { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.nl-ed__tagname {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--lime-soft);
  color: var(--lime-ink);
}
.nl-ed__img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 74px;
  margin: 0.6rem 0 0.2rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--line-soft) 8px 9px), var(--surface-2);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-3);
}
.nl-ed__img .ic { width: 16px; height: 16px; }
.nl-ed__drawer { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 0.75rem; background: color-mix(in oklab, var(--surface) 80%, var(--bg)); }
.nl-ed__drawer-h { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 700; }
.nl-ed__drawer-h .ic { width: 13px; height: 13px; color: var(--text-3); }
.nl-field { display: flex; flex-direction: column; gap: 0.25rem; }
.nl-field small { font-size: 0.6rem; color: var(--text-3); }
.nl-field__in {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl-field__row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.nl-seg {
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  font-size: 0.6rem;
  color: var(--text-3);
}
.nl-seg--on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 600; }
.nl-ed__actions { margin-top: 0.2rem; }
.nl-ed__actions .os-btn { flex: 1; justify-content: center; padding: 0.4rem 0.4rem; }
.nl-ed__preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--line-soft);
}
.nl-ed__preview-l {
  margin-right: auto;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nl-dev { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; color: var(--text-3); }
.nl-dev .ic { width: 15px; height: 15px; }
.nl-dev--on { background: var(--lime-soft); color: var(--lime-ink); }
.nl-ed__test { margin-left: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--text-2); }

@media (max-width: 560px) {
  .nl-ed__cols { grid-template-columns: 1fr; }
  .nl-ed__main { border-right: none; border-bottom: 1px solid var(--line-soft); }
}

/* --- assistant de diffusion (deep dive) --- */
.nl-wz__body { padding: 0.8rem 0.95rem 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.nl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.nl-step {
  padding: 0.3rem 0.2rem;
  border-radius: 20px;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--surface-2);
  color: var(--text-3);
}
.nl-step--done { background: var(--ok-bg); color: var(--ok); }
.nl-step--on { background: var(--lime); color: var(--on-lime); }
.nl-recap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface) 70%, var(--bg));
}
.nl-recap__label {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nl-recap__hero { display: flex; align-items: baseline; gap: 0.4rem; }
.nl-recap__hero b { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--lime-ink); font-feature-settings: "tnum" 1; line-height: 1.1; }
.nl-recap__hero span { font-size: 0.74rem; color: var(--text-2); }
.nl-recap__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.05rem 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line-soft);
}
.nl-recap__t { font-size: 0.76rem; font-weight: 700; }
.nl-recap__n { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; font-feature-settings: "tnum" 1; }
.nl-recap__d { grid-column: 1 / -1; font-size: 0.64rem; color: var(--text-3); }
.nl-recap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.nl-recap__ch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; }
.nl-recap__ch .ic { width: 13px; height: 13px; color: var(--lime-ink); }
.nl-recap__when { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; }
.nl-wz__foot {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.95rem;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--surface) 70%, var(--bg));
}
@media (max-width: 480px) {
  .nl-steps { grid-template-columns: 1fr 1fr; }
  .nl-recap__grid { grid-template-columns: 1fr; }
}

/* --- application adhérent (deep dive) --- */
.nl-phone-wrap { position: relative; max-width: 300px; margin: 0 auto; padding-top: 2.4rem; }
.nl-phone {
  border-radius: 30px;
  padding: 8px;
  background: #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-2);
}
/* l'écran de l'app garde son thème sombre quel que soit celui de la page */
.nl-app {
  --app-bg: #111114;
  --app-card: #1b1b21;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-text: #f2f2f5;
  --app-mute: #9a9aa6;
  min-height: 430px;
  border-radius: 23px;
  padding: 1.1rem 0.85rem 1rem;
  background: var(--app-bg);
  color: var(--app-text);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.nl-app__hello { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.nl-app__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-left: 0.5rem;
  border-left: 3px solid #0EA5E9;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nl-app__count {
  padding: 0.1rem 0.4rem;
  border-radius: 20px;
  background: #DEF643;
  color: #131303;
  font-size: 0.56rem;
  letter-spacing: 0;
  text-transform: none;
}
.nl-app__more { margin-left: auto; font-size: 0.6rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--app-mute); }
.nl-pub {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.75rem;
  border-radius: 14px;
  background: var(--app-card);
  border: 1px solid rgba(167, 139, 250, 0.45);
}
.nl-pub__row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.6rem; color: var(--app-mute); }
.nl-pub__new { padding: 0.08rem 0.4rem; border-radius: 20px; background: rgba(167, 139, 250, 0.18); color: #c4b5fd; font-weight: 700; }
.nl-pub__subject { font-size: 0.86rem; font-weight: 800; line-height: 1.3; }
.nl-pub__preview { font-size: 0.68rem; line-height: 1.45; color: var(--app-mute); }
.nl-pub__cta { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; font-weight: 700; color: #DEF643; }
.nl-pub__cta .ic { width: 12px; height: 12px; }
.nl-sess {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: var(--app-card);
  border-left: 3px solid #DEF643;
  font-size: 0.64rem;
  color: var(--app-mute);
}
.nl-sess b { font-size: 0.74rem; color: var(--app-text); }
.nl-sess--hyrox { border-left-color: #38bdf8; }

.nl-push {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: min(290px, 104%);
  transform: translateX(-50%) rotate(-1.5deg);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
}
.nl-push__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 0.62rem;
  font-weight: 800;
}
.nl-push__body { display: flex; flex-direction: column; min-width: 0; font-size: 0.72rem; line-height: 1.3; }
.nl-push__body span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-push__at { margin-left: auto; align-self: flex-start; font-family: var(--mono); font-size: 0.6rem; color: var(--text-3); }


/* ------------------------------------------------------------
   WODZ TV — fiche /tv/{id} et écran de salle (tv.blade.php)
   ------------------------------------------------------------ */
/* ============================================================
   WODZ TV — réglages d'un écran et écran de salle simulé
   Reprend /tv/{id} (fiche de réglages : mode d'affichage,
   catégories, chronomètre, palette, aperçu) et la vue TV elle-même
   (resources/views/tv/tv.blade.php + public/css/tv.css) : horloge ou
   chrono en tête, entraînement et phases à gauche, inscrits de la
   séance à droite. L'écran TV reste sombre quel que soit le thème du
   site : c'est une télé, pas une page.
   Tailles de l'écran TV en unités de conteneur (cqw) : l'aperçu garde
   ses proportions 16:9 à toutes les largeurs, comme la vraie vue en vh.
   ============================================================ */

/* ------------------------------------------------------------
   1. EN-TÊTE DE PAGE — code d'appairage et état de l'écran
   ------------------------------------------------------------ */
.tv-code {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.3rem 0.18rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tv-code b {
  display: inline-flex;
  gap: 2px;
}
.tv-code b i {
  display: grid;
  place-items: center;
  width: 15px;
  height: 18px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}
.tv-seen {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ------------------------------------------------------------
   2. COLONNES — réglages à gauche, aperçu à droite
   ------------------------------------------------------------ */
.tv-cols {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}
@media (max-width: 720px) {
  .tv-cols { grid-template-columns: minmax(0, 1fr); }
  /* sur téléphone, l'écran d'abord : c'est lui qui se voit dans le cadre plafonné */
  .tv-cols .tv-prev { order: -1; }
}

/* ------------------------------------------------------------
   3. FICHE DE RÉGLAGES — groupes « // … », lignes titre + contrôle
   ------------------------------------------------------------ */
.tv-set {
  padding: 0.55rem 0.75rem 0.7rem;
}
.tv-set__grp {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.55rem 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tv-set__grp:first-child { margin-top: 0.1rem; }
.tv-set__grp::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.tv-set__grp .slash { color: var(--lime-ink); }
.tv-set__row + .tv-set__row { margin-top: 0.55rem; }
.tv-set__t {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.tv-set__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tv-set__line .tv-set__t { margin: 0; }
.tv-set__line > :last-child { margin-left: auto; }

/* Mode d'affichage : trois options exclusives, comme les .opt-card du produit */
.tv-modes {
  display: grid;
  gap: 0.3rem;
}
.tv-mode {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.tv-mode small {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tv-mode b {
  grid-column: 1;
  font-size: 0.68rem;
  font-weight: 700;
}
.tv-mode::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
}
.tv-mode--on {
  background: var(--lime-soft);
  border-color: var(--lime-edge);
}
.tv-mode--on small { color: var(--lime-ink); }
.tv-mode--on::after {
  border-color: var(--lime-ink);
  background: radial-gradient(circle, var(--lime-ink) 0 45%, transparent 50%);
}

/* Catégories de séances : cases à cocher en pastilles, couleur de catégorie */
.tv-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tv-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-size: 0.64rem;
  color: var(--text-3);
  white-space: nowrap;
}
.tv-cat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat, var(--text-3));
  opacity: 0.45;
}
.tv-cat--on {
  border-color: var(--lime-edge);
  background: var(--lime-soft);
  color: var(--text);
  font-weight: 600;
}
.tv-cat--on::before { opacity: 1; }
.tv-cat--on::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-left: 0.05rem;
  border-left: 1.5px solid var(--lime-ink);
  border-bottom: 1.5px solid var(--lime-ink);
  transform: rotate(-45deg) translateY(-1px);
}
.cat-mute { --cat: var(--text-3); }

/* Liste déroulante figée */
.tv-sel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.64rem;
  color: var(--text-2);
}
.tv-sel::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
}

/* Palettes : carte nommée + bande de couleurs */
.tv-pals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}
.tv-pal {
  padding: 0.3rem 0.35rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
.tv-pal small {
  display: block;
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.tv-pal b {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  margin: 0.05rem 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-pal--on {
  border-color: var(--lime-edge);
  background: var(--lime-soft);
}
.tv-pal--on small { color: var(--lime-ink); }
.tv-pal__sw {
  display: flex;
  height: 9px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.tv-pal__sw i { flex: 1; }

/* ------------------------------------------------------------
   4. APERÇU — onglets d'écran + cadre 16:9
   ------------------------------------------------------------ */
.tv-prev {
  padding: 0.55rem 0.6rem 0.6rem;
}
.tv-prev__head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.tv-prev__label {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 0.3rem;
}
.tv-prev__tab {
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 0.62rem;
  color: var(--text-2);
  background: var(--surface);
  white-space: nowrap;
}
.tv-prev__tab--on {
  background: var(--lime-soft);
  border-color: var(--lime-edge);
  color: var(--lime-ink);
  font-weight: 600;
}
.tv-prev__foot {
  margin: 0.45rem 0 0;
  font-size: 0.6rem;
  color: var(--text-3);
}

/* ------------------------------------------------------------
   5. L'ÉCRAN TV — palette de la salle posée sur des variables,
      comme --tv-bg / --tv-accent… dans public/css/tv.css
   ------------------------------------------------------------ */
.tv-screen {
  --tv-bg: #0b0b0d;
  --tv-text: #eaeaea;
  --tv-title: #ffffff;
  --tv-accent: #DEF643;
  --tv-clock: #fbe2d0;
  --tv-run: #a2faa1;
  --tv-hl: #fbf585;
  --tv-wait: #f5a524;
  --tv-noshow: rgba(251, 117, 117, 0.3);
  --tv-digit: 'JetBrains Mono', ui-monospace, monospace;
  --tv-display: 'Inter', 'Arial Black', Arial, sans-serif;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tv-bg);
  color: var(--tv-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 32px -16px rgba(0, 0, 0, 0.7);
  font-family: Arial, 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
/* reflet discret de dalle, sans toucher à la lisibilité */
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.04), transparent 38%);
}

/* chiffres « afficheur » : la vraie vue utilise Digital-7 Mono Italic */
.tv-dig {
  font-family: var(--tv-digit);
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  transform: skewX(-9deg);
  font-feature-settings: "tnum" 1, "zero" 0;
  letter-spacing: -0.02em;
}

/* rangée du haut : logo salle · horloge / chrono · logo Wodz */
.tv-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2.2cqw 2.6cqw 1cqw;
}
.tv-logo {
  justify-self: start;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16161a;
  box-shadow: 0 0 0 0.35cqw #eaeaea;
  color: #DEF643;
  font-family: var(--tv-display);
  font-weight: 900;
  font-size: 1.9cqw;
  letter-spacing: -0.02em;
}
.tv-clock {
  display: flex;
  align-items: baseline;
  gap: 0.4cqw;
  color: var(--tv-clock);
}
.tv-clock__t {
  font-size: 8.6cqw;
  line-height: 1;
}
.tv-clock__ms {
  font-size: 3.4cqw;
}
.tv-clock--run { color: var(--tv-run); }
.tv-top__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
}
/* bouton pause du chrono, cerclé à l'accent de la palette */
.tv-pause {
  width: 4.8cqw;
  height: 4.8cqw;
  border-radius: 50%;
  border: 0.45cqw solid var(--tv-accent);
  display: grid;
  place-items: center;
}
.tv-pause::before {
  content: "";
  width: 1.5cqw;
  height: 1.9cqw;
  border-left: 0.5cqw solid var(--tv-accent);
  border-right: 0.5cqw solid var(--tv-accent);
}
.tv-w {
  width: 4.4cqw;
  height: 4.4cqw;
  display: block;
  object-fit: contain;
}

/* corps : entraînement (3fr) · inscrits (1.3fr), comme .wodzTvContent */
.tv-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 3fr 1.3fr;
}
.tv-train {
  min-width: 0;
  padding: 0.6cqw 2.2cqw 0 2.6cqw;
}
.tv-train__title {
  margin: 0 0 1.3cqw;
  display: flex;
  gap: 2.6cqw;
  font-family: var(--tv-display);
  font-weight: 900;
  font-style: italic;
  font-size: 3.3cqw;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tv-title);
  white-space: nowrap;
}
.tv-phases {
  display: flex;
  gap: 2.3cqw;
  margin-bottom: 1.8cqw;
  font-family: var(--tv-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.95cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-text);
  white-space: nowrap;
}
.tv-phase {
  padding: 0 0.5cqw 0.7cqw;
  border-bottom: 0.18cqw solid transparent;
}
.tv-phase--on {
  color: var(--tv-accent);
  border-bottom-color: var(--tv-accent);
}
.tv-lvls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6cqw;
  font-size: max(1.85cqw, 6.5px);
  line-height: 1.3;
}
.tv-lvl p { margin: 0; }
.tv-lvl__t {
  display: inline-block;
  color: var(--tv-hl);
  text-transform: uppercase;
  font-size: max(2.1cqw, 7px);
}
.tv-lvl__f {
  display: block;
  text-transform: uppercase;
  margin-bottom: 0.8cqw;
}

/* colonne des inscrits : filet à gauche, onglets Séance / Journée */
.tv-list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 0.14cqw solid var(--tv-text);
  margin: 0 2cqw 2cqw 0;
  padding-left: 0.8cqw;
  overflow: hidden;
}
.tv-list__modes {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  padding: 0 0.4cqw;
  font-family: var(--tv-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.8cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tv-list__modes span:first-child {
  padding-bottom: 0.6cqw;
  border-bottom: 0.14cqw solid var(--tv-accent);
}
.tv-list__count {
  margin-left: auto;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1cqw;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}
.tv-list__sess {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1cqw;
  padding: 0.7cqw 0 0.4cqw;
  font-size: 2.05cqw;
}
.tv-list__sess::before,
.tv-list__sess::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.6cqw solid transparent;
  border-bottom: 0.6cqw solid transparent;
}
.tv-list__sess::before { border-right: 0.7cqw solid currentColor; }
.tv-list__sess::after { border-left: 0.7cqw solid currentColor; }

.tv-row {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.6cqw 0.5cqw;
  border-bottom: 0.1cqw solid rgba(234, 234, 234, 0.55);
  font-weight: 700;
  font-size: max(1.5cqw, 6.5px);
  white-space: nowrap;
}
.tv-row__av {
  flex: none;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #9a9aa2 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, #9a9aa2 0 42%, transparent 43%),
    #d7d7dc;
}
.tv-row__n {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  overflow: hidden;
}
.tv-row__n > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-row__s {
  flex: none;
  margin-left: auto;
  font-size: 1.4cqw;
}
.tv-row--noshow {
  background: var(--tv-noshow);
  opacity: 0.5;
}
.tv-row--wait { color: var(--tv-wait); }
/* ligne sélectionnée à la télécommande : liseré d'accent à gauche */
.tv-row--focus {
  box-shadow: inset 0.5cqw 0 0 var(--tv-accent);
  background: rgba(255, 255, 255, 0.12);
}

/* marqueurs d'origine accolés au nom (N, DROP-IN, W, CP) */
.tv-org {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.45cqw;
  height: 1.45cqw;
  padding: 0 0.35cqw;
  border-radius: 0.35cqw;
  font-size: 0.86cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tv-org--new {
  color: var(--tv-accent);
  box-shadow: inset 0 0 0 0.12cqw var(--tv-accent);
}
.tv-org--drop {
  color: var(--tv-text);
  box-shadow: inset 0 0 0 0.09cqw var(--tv-text);
  opacity: 0.75;
  font-size: 0.74cqw;
}
.tv-org--wp { background: #c8f5d8; color: #0a7b3e; }
.tv-org--cp {
  background: #26262f;
  color: #fff;
  box-shadow: inset 0 0 0 0.09cqw rgba(255, 255, 255, 0.35);
}

/* badges Community : niveau (deux barres + plaque inclinée) et série (pouls) */
.tv-cb {
  --cb: #94a3b8;
  flex: none;
  display: inline-flex;
  align-items: stretch;
  height: 1.7cqw;
}
.tv-cb__bars {
  display: flex;
  gap: 0.14cqw;
}
.tv-cb__bars i {
  width: 0.24cqw;
  background: var(--cb);
  transform: skewX(-12deg);
  border-radius: 0.06cqw;
}
.tv-cb__plate {
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0 0.6cqw 0 0.5cqw;
  transform: skewX(-12deg);
  background: color-mix(in srgb, var(--cb) 22%, transparent);
  border: 0.11cqw solid color-mix(in srgb, var(--cb) 55%, transparent);
  border-radius: 0.28cqw;
  color: var(--cb);
  font-style: italic;
  font-weight: 800;
  font-size: 0.92cqw;
}
.tv-cb--grade .tv-cb__plate { border-left: 0; }
.tv-cb__plate > * { transform: skewX(12deg); }
.tv-cb svg {
  width: 0.95cqw;
  height: 0.7cqw;
  display: block;
}

/* défilement : la vraie liste respire vers le bas quand elle dépasse */
.tv-hint {
  margin: auto auto 0;
  width: 1.1cqw;
  height: 1.1cqw;
  border-right: 0.16cqw solid currentColor;
  border-bottom: 0.16cqw solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

/* ------------------------------------------------------------
   6. ÉCRANS DES VISUELS DE SECTION (liste seule, chrono, classement)
   ------------------------------------------------------------ */
.tv-frame {
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.tv-frame figcaption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* écran « séance » agrandi : la liste en pleine largeur */
.tv-screen--solo .tv-body { grid-template-columns: 1fr; }
.tv-screen--solo .tv-list {
  border-left: 0;
  margin: 0 3.4cqw 2.4cqw;
  padding-left: 0;
}
.tv-screen--solo .tv-list__modes { font-size: 3.3cqw; }
.tv-screen--solo .tv-list__count { font-size: 1.8cqw; }
.tv-screen--solo .tv-list__sess { font-size: 3.4cqw; }
.tv-screen--solo .tv-list__sess::before,
.tv-screen--solo .tv-list__sess::after { border-top-width: 1cqw; border-bottom-width: 1cqw; }
.tv-screen--solo .tv-list__sess::before { border-right-width: 1.1cqw; }
.tv-screen--solo .tv-list__sess::after { border-left-width: 1.1cqw; }
.tv-screen--solo .tv-row { font-size: 2.5cqw; gap: 1.2cqw; padding: 1cqw 0.8cqw; }
.tv-screen--solo .tv-row__av { width: 3.8cqw; height: 3.8cqw; }
.tv-screen--solo .tv-row__s { font-size: 2.6cqw; }
.tv-screen--solo .tv-row__n { gap: 1cqw; }
.tv-screen--solo .tv-org { min-width: 2.6cqw; height: 2.6cqw; font-size: 1.55cqw; padding: 0 0.6cqw; border-radius: 0.6cqw; }
.tv-screen--solo .tv-org--drop { font-size: 1.3cqw; }
.tv-screen--solo .tv-cb { height: 3cqw; }
.tv-screen--solo .tv-cb__bars { gap: 0.25cqw; }
.tv-screen--solo .tv-cb__bars i { width: 0.42cqw; }
.tv-screen--solo .tv-cb__plate { font-size: 1.6cqw; gap: 0.6cqw; padding: 0 1cqw 0 0.9cqw; border-width: 0.2cqw; border-radius: 0.5cqw; }
.tv-screen--solo .tv-cb svg { width: 1.7cqw; height: 1.2cqw; }
.tv-screen--solo .tv-top { padding-bottom: 1.4cqw; }
.tv-screen--solo .tv-clock__t { font-size: 7cqw; }

/* fenêtre posée sur l'écran : présence, liste d'attente, chrono */
.tv-modal {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  min-width: 46cqw;
  padding: 2.4cqw 2.8cqw 1.6cqw;
  border-radius: 1.2cqw;
  background: #4a4a4f;
  color: #eaeaea;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.6);
  text-align: center;
}
.tv-modal__q {
  margin: 0 0 0.6cqw;
  font-size: 3cqw;
  font-weight: 700;
}
.tv-modal__who {
  margin: 0 0 2cqw;
  font-size: 2cqw;
  color: var(--tv-wait);
}
.tv-modal__acts {
  display: flex;
  justify-content: space-around;
  font-size: 2.2cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tv-modal__no { color: #f08080; }
.tv-modal__ok { color: #7ee07c; }
.tv-screen--dim .tv-body,
.tv-screen--dim .tv-top { opacity: 0.35; }

/* réglage du chrono : Stopwatch / AMRAP / Tabata et leurs durées */
.tv-maker {
  width: 58cqw;
  padding: 2cqw 2.2cqw 1.4cqw;
  text-align: left;
}
.tv-maker__types {
  display: flex;
  justify-content: center;
  gap: 3cqw;
  margin-bottom: 1.4cqw;
  font-family: var(--tv-display);
  font-weight: 900;
  font-style: italic;
  font-size: 2.3cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tv-maker__types span { padding: 0.3cqw 1cqw; }
.tv-maker__types .on { box-shadow: 0 0 0 0.25cqw var(--tv-accent); border-radius: 0.3cqw; }
.tv-maker__f {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 0.8cqw 0.4cqw;
  border-bottom: 0.12cqw solid rgba(234, 234, 234, 0.45);
}
.tv-maker__f b {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 2.3cqw;
  text-transform: uppercase;
}
.tv-maker__f small {
  display: block;
  font-size: 1.5cqw;
  opacity: 0.7;
}
.tv-maker__v {
  margin-left: auto;
  white-space: nowrap;
  font-size: 1.9cqw;
}
.tv-maker__v .tv-dig { font-size: 2.9cqw; margin: 0 0.3cqw; }
.tv-maker .tv-modal__acts { margin-top: 1.4cqw; font-size: 3.2cqw; }

/* le compte des tours restants, à gauche de l'horloge en Tabata */
.tv-clock__rem {
  font-size: 5.4cqw;
  margin-right: 1.6cqw;
  color: var(--tv-hl);
}

/* classement Community : titre, podium, lignes, points de carrousel */
.tv-lb {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 2.6cqw 1.6cqw;
}
.tv-lb__head {
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
}
.tv-lb__t {
  margin: 0;
  font-family: var(--tv-display);
  font-weight: 900;
  font-style: italic;
  font-size: 3.6cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tv-title);
}
.tv-lb__sub {
  font-size: 1.4cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tv-pod {
  display: grid;
  grid-template-columns: repeat(3, 15cqw);
  justify-content: center;
  align-items: end;
  gap: 1.8cqw;
  margin: 0.6cqw 0 0.4cqw;
}
.tv-pod__c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4cqw;
  font-weight: 700;
  font-size: 1.4cqw;
}
.tv-pod__av {
  position: relative;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.7cqw;
  color: #fff;
  background: linear-gradient(135deg, #c77dff, #7b2cbf);
  margin-bottom: 0.6cqw;
}
.tv-pod__c--1 .tv-pod__av { width: 6.2cqw; height: 6.2cqw; font-size: 2cqw; }
.tv-pod__av i {
  position: absolute;
  bottom: -0.9cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 1.2cqw;
  font-weight: 800;
  border: 0.2cqw solid var(--tv-bg);
}
.tv-pod__c--1 .tv-pod__av i { background: #ffd76a; color: #4a3600; }
.tv-pod__c--2 .tv-pod__av i { background: #d5dce6; color: #333c47; }
.tv-pod__c--3 .tv-pod__av i { background: #d9955b; color: #3d2408; }
.tv-pod__base {
  width: 100%;
  margin-top: 0.4cqw;
  border-radius: 0.6cqw 0.6cqw 0 0;
  display: grid;
  place-items: center;
  font-size: 2cqw;
  color: rgba(255, 255, 255, 0.85);
}
.tv-pod__c--1 .tv-pod__base { height: 4.2cqw; background: linear-gradient(180deg, #ffd76a, #e0a112); }
.tv-pod__c--2 .tv-pod__base { height: 3cqw; background: linear-gradient(180deg, #d5dce6, #9aa7b8); }
.tv-pod__c--3 .tv-pod__base { height: 2.3cqw; background: linear-gradient(180deg, #d9955b, #a15b23); }
.tv-lb__row {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.55cqw 0.6cqw;
  border-bottom: 0.12cqw solid rgba(234, 234, 234, 0.5);
  font-weight: 700;
}
.tv-lb__row:last-of-type { border-bottom: 0; }
.tv-lb__rank { width: 2.4cqw; font-size: 2cqw; }
.tv-lb__ini {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #26262c;
  font-size: 1cqw;
}
.tv-lb__row .tv-cb { margin-left: auto; }
.tv-dots {
  display: flex;
  justify-content: center;
  gap: 0.8cqw;
  margin-top: auto;
  padding-top: 0.8cqw;
}
.tv-dots i {
  width: 0.75cqw;
  height: 0.75cqw;
  border-radius: 50%;
  background: rgba(234, 234, 234, 0.35);
}
.tv-dots i:first-child { background: var(--tv-accent); }
.tv-screen--lb {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1.2cqw, transparent 1.2cqw 2.4cqw),
    var(--tv-bg);
}

/* classement : lignes et badges à l'échelle d'un mur, pas d'une liste d'inscrits */
.tv-lb .tv-pod__c { font-size: 1.75cqw; }
.tv-lb .tv-cb { height: 2.5cqw; }
.tv-lb .tv-cb__bars { gap: 0.22cqw; }
.tv-lb .tv-cb__bars i { width: 0.38cqw; }
.tv-lb .tv-cb__plate { font-size: 1.5cqw; padding: 0 1cqw 0 0.8cqw; border-radius: 0.45cqw; }
.tv-lb__row { font-size: 2cqw; }
.tv-lb__ini { width: 3cqw; height: 3cqw; font-size: 1.15cqw; }
.tv-lb__rank { font-size: 2.4cqw; }

/* ------------------------------------------------------------
   ÉCRANS CONDENSÉS — la LP valorise les modules sans les simuler
   entièrement : bandeau sur une ligne, paires de panneaux.
   ------------------------------------------------------------ */
/* Bandeau de page sur une seule ligne : titre à gauche, actions à droite, hors du coin biseauté */
.pg-hero--inline { display: flex; align-items: center; gap: 0.8rem; padding-right: 9.5rem; }
.pg-hero--inline .pg-hero__title { margin: 0; }
.pg-hero--inline .pg-actions { margin-left: auto; }
@media (max-width: 720px) {
  .pg-hero--inline { display: block; padding-right: 0.9rem; }
  .pg-hero--inline .pg-hero__title { margin: 0 0 0.55rem; }
  .pg-hero--inline .pg-actions { margin-left: 0; }
}
/* Wodz TV : l'aperçu garde son 16:9 mais plafonne en largeur, pour que la
   hauteur de l'écran ne dépende plus de la place laissée par les réglages. */
@media (min-width: 721px) {
  .tv-cols--capped { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
}

/* Deux panneaux côte à côte (community, multi-sites), empilés sur téléphone —
   un style inline écraserait la règle mobile de .scr-cols. */
.scr-cols--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.scr-cols--pair-wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 720px) {
  .scr-cols--pair, .scr-cols--pair-wide { grid-template-columns: minmax(0, 1fr); }
}

/* Bandeau ops sur une rangée : identité à gauche, chiffres à droite (tableau de bord condensé) */
.scr-hero--row { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.5rem; padding-right: 7rem; }  /* place du coin biseauté */
.scr-hero--row .scr-pulse { flex-wrap: nowrap; gap: 1.3rem; }
/* coin biseauté ramené à un liseré d'angle : il ne doit pas passer sous les chiffres */
.scr-hero--row::after { width: 130px; height: 46px; }
.scr-hero--row .scr-hero__eyebrow { grid-column: 1 / -1; }
.scr-hero--row .scr-hero__id { margin-bottom: 0; }
.os-screen .scr-hero--row .scr-pulse { margin: 0; padding: 0 0 0 1.6rem; border-top: none; border-left: 1px solid var(--line); position: relative; z-index: 3; }
@media (max-width: 720px) {
  .scr-hero--row { display: block; padding-right: 1rem; }
  /* frise du jour : défilable plutôt qu'écrasée sur téléphone */
  .dtl-wrap { overflow-x: auto; }
  .dtl-wrap .dtl { min-width: 640px; }
  .os-screen .scr-hero--row .scr-pulse { margin-top: 0.8rem; padding: 0.7rem 0 0; border-left: none; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------
   PROSPECTION INTERACTIVE — kanban cliquable + fiche prospect
   Reprend /crm/prospects et sa modale : un clic sur une carte ouvre
   la fiche ; « Programmer l'essai » et « Enregistrer une vente »
   se jouent dans la page (os.js, bloc data-kbx).
   ------------------------------------------------------------ */
.kbx { position: relative; }
.kbx-hint { color: var(--lime-ink); }
.kb--pipe { gap: 0.45rem; }
.kb-col__n {
  margin-left: 0.15rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--text-3);
}
button.kb-card {
  width: 100%;
  border: none;
  border-left: 3px solid var(--text-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
button.kb-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.45); }
button.kb-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.kb-card--new { border-left-color: #eab308 !important; }
.kb-card--late { border-left-color: var(--danger) !important; }
.kb-card--ok { border-left-color: #22c55e !important; }
.kb-card--sched { background: color-mix(in oklab, var(--info) 12%, var(--surface)); border-left-color: var(--info) !important; }
.kb-card--sched b, .kb-card--sched span { color: var(--info); }
/* la carte à essayer : un halo discret, pas un clignotant */
.kb-card--try { box-shadow: 0 0 0 1px var(--lime-edge), 0 0 0 4px var(--lime-soft); animation: kbx-try 2.4s ease-in-out infinite; }
@keyframes kbx-try { 50% { box-shadow: 0 0 0 1px var(--lime-edge), 0 0 0 7px transparent; } }
.kb-card--moved { animation: kbx-moved 1.4s ease-out; }
@keyframes kbx-moved { 0% { box-shadow: 0 0 0 3px var(--lime); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .kb-card--try, .kb-card--moved { animation: none; } }

/* fiche prospect, posée sur l'écran */
.kbx-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in oklab, var(--bg) 62%, transparent);
  backdrop-filter: blur(2px);
}
.kbx-modal[hidden] { display: none; }
/* fiche ouverte : les pastilles d'annotation s'effacent */
.kbx-open .mark { visibility: hidden !important; }
.kbx-open.os-window::after { display: none; }  /* le fondu mobile ne doit pas couvrir « Confirmer » */
.kbx-panel {
  width: min(560px, 100%);
  /* taille fixe d'une vue à l'autre : en-tête et « Confirmer » ne bougent jamais,
     c'est le contenu qui défile */
  height: min(500px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: 0.72rem;
}
.kbx-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.9rem 0.6rem; border-bottom: 1px solid var(--line-soft); }
.kbx-head .ic { width: 16px; height: 16px; color: var(--text-2); }
.kbx-head b { font-size: 0.9rem; color: var(--text); }
.kbx-stage { padding: 0.08rem 0.45rem; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--info) 40%, transparent); background: color-mix(in oklab, var(--info) 10%, var(--surface)); color: var(--info); font-size: 0.6rem; font-weight: 600; }
.kbx-close { margin-left: auto; border: none; background: none; color: var(--text-2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.3rem; }
.kbx-quick { display: flex; gap: 0.35rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line-soft); }
.kbx-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); font-size: 0.62rem; }
.kbx-chip .ic { width: 11px; height: 11px; }
.kbx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.kbx-head, .kbx-quick, .kbx-foot { flex: none; }
/* vue essai : seule la liste des séances défile */
.kbx-body--list { overflow: hidden; }
.kbx-body--list .kbx-list { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-right: 0.2rem; }
.kbx-body > * { flex: none; }
.kbx-body--list > .kbx-list { flex: 1 1 auto; }
.kbx-back { justify-self: start; align-self: flex-start; border: none; background: none; padding: 0; color: var(--lime-ink); font: inherit; font-size: 0.64rem; cursor: pointer; }
.kbx-title { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--text); }
.kbx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; color: var(--text-2); font-size: 0.66rem; }
.kbx-facts span { color: var(--text-3); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
.kbx-sec { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.1rem; font-family: var(--mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.kbx-sec .ic { width: 12px; height: 12px; color: var(--text-3); }
.kbx-sec em { font-style: normal; color: var(--text-3); }
.kbx-hist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 8px; }
.kbx-hist li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.34rem 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-size: 0.64rem; }
.kbx-hist li:last-child { border-bottom: none; }
.kbx-hist li:first-child span { color: var(--text); }
.kbx-hist time { margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.54rem; color: var(--text-3); }
.kbx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.kbx-act {
  display: grid; gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit; font-size: 0.6rem; text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.kbx-act b { display: flex; align-items: center; gap: 0.35rem; color: var(--text); font-size: 0.7rem; }
.kbx-act b .ic { width: 13px; height: 13px; color: var(--lime-ink); }
.kbx-act:hover { border-color: var(--lime-edge); }
.kbx-act--muted { cursor: default; opacity: 0.6; }
.kbx-act--muted:hover { border-color: var(--line); }
.kbx-days { display: flex; gap: 0.3rem; }
.kbx-day { min-width: 44px; padding: 0.25rem 0.3rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 0.56rem; text-align: center; cursor: pointer; }
.kbx-day b { display: block; font-size: 0.8rem; color: var(--text); }
.kbx-day.on { border-color: var(--lime); background: var(--lime); color: var(--on-lime); }
.kbx-day.on b { color: var(--on-lime); }
.kbx-list { display: grid; gap: 0.3rem; }
.kbx-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.6rem; border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: 7px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 0.64rem; text-align: left; cursor: pointer; }
.kbx-opt b { color: var(--text); font-size: 0.72rem; }
.kbx-opt em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 0.56rem; color: var(--ok); }
.kbx-opt.on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.kbx-opt--prod { border-left-color: var(--lime); }
.kbx-note { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 7px; background: var(--lime-soft); color: var(--text-2); font-size: 0.62rem; }
.kbx-note b { color: var(--text); }
.kbx-note .ic { width: 13px; height: 13px; color: var(--lime-ink); flex: none; }
.kbx-foot { display: flex; justify-content: flex-end; gap: 0.4rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--line-soft); }
.kbx-btn { padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--text-2); font: inherit; font-size: 0.64rem; font-weight: 600; cursor: pointer; }
.kbx-btn--go { border-color: var(--lime); background: var(--lime); color: var(--on-lime); }
.kbx-btn--go:disabled { opacity: 0.45; cursor: not-allowed; }
.kbx-toast {
  position: absolute; left: 50%; bottom: 0.9rem; z-index: 25;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.45rem;
  max-width: 90%;
  padding: 0.5rem 0.8rem;
  border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, var(--ok) 12%, var(--surface));
  color: var(--text);
  font-size: 0.68rem;
  box-shadow: var(--shadow-1);
}
.kbx-toast[hidden] { display: none; }
.kbx-toast .ic { width: 14px; height: 14px; color: var(--ok); flex: none; }
@media (max-width: 759px) {
  /* fenêtre plafonnée sur téléphone : la fiche se cale en haut, dans la partie visible */
  .kbx-modal { place-items: start center; padding: 0.5rem; }
  .kbx-panel { height: min(430px, 100%); }
  /* trop peu de hauteur pour isoler la liste : tout le contenu défile, le pied reste fixe */
  .kbx-body--list { overflow-y: auto; }
  .kbx-body--list .kbx-list { flex: none; overflow: visible; }
}
@media (max-width: 720px) {
  .kb--pipe { overflow-x: auto; padding-bottom: 0.4rem; }
  .kb--pipe .kb-col { flex: 0 0 118px; }
  .kbx-actions, .kbx-facts { grid-template-columns: 1fr; }
  .kbx-days { flex-wrap: wrap; }
}
.kbx-panel--wide { width: min(780px, 100%); }
.kbx-cats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kbx-cat { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border: 1px solid var(--line); border-radius: 20px; background: none; color: var(--text-2); font: inherit; font-size: 0.6rem; cursor: pointer; }
.kbx-cat[style]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.kbx-cat.on { border-color: var(--lime); background: var(--lime); color: var(--on-lime); font-weight: 600; }
.kbx-days { flex-wrap: wrap; }
.kbx-day--sun:not(.on) { opacity: 0.7; }
.kbx-list .kbx-opt { border-left-color: var(--c, var(--info)); }
.kbx-opt.is-off { opacity: 0.45; cursor: not-allowed; }
.kbx-opt.is-off em { color: var(--text-3); }
.kbx-empty { margin: 0.3rem 0; text-align: center; color: var(--text-3); font-size: 0.64rem; }
.kbx-empty .ic { width: 20px; height: 20px; }
/* vente : catalogue à gauche, récapitulatif à droite, comme dans la modale réelle */
.kbx-sale { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.kbx-cat-col { display: grid; gap: 0.45rem; }
.kbx-prods { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.kbx-prod { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--line-soft); font-size: 0.6rem; color: var(--text-3); }
.kbx-prod:last-child { border-bottom: none; }
.kbx-prod__ic { flex: none; display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px; background: var(--surface-2); font-family: var(--mono); font-size: 0.5rem; font-weight: 700; color: var(--text-2); }
.kbx-prod__t { flex: 1; min-width: 0; }
.kbx-prod__t b { display: block; color: var(--text); font-size: 0.68rem; font-weight: 600; }
.kbx-prod__t i { font-style: normal; font-family: var(--mono); font-size: 0.56rem; padding: 0.02rem 0.3rem; border-radius: 4px; background: var(--ok-bg); color: var(--ok); margin-left: 0.2rem; }
.kbx-add { flex: none; border: none; background: none; color: var(--lime-ink); font: inherit; font-size: 0.6rem; font-weight: 600; cursor: pointer; }
.kbx-recap { display: grid; gap: 0.35rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.kbx-recap__h { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; }
.kbx-recap__h .ic { width: 13px; height: 13px; color: var(--text-2); }
.kbx-recap__h b { color: var(--text); }
.kbx-clear { margin-left: auto; padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 5px; background: none; color: var(--text-2); font: inherit; font-size: 0.56rem; cursor: pointer; }
.kbx-line { display: flex; align-items: center; gap: 0.4rem; font-size: 0.64rem; color: var(--text); }
.kbx-line b { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; }
.kbx-rm { border: none; background: none; color: var(--text-3); font-size: 0.8rem; line-height: 1; cursor: pointer; }
.kbx-total { display: flex; align-items: baseline; padding-top: 0.35rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.kbx-total b { margin-left: auto; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0; color: var(--text); }
@media (max-width: 720px) { .kbx-sale { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   WODZ TV EN SITUATION — une salle, un cours, l'écran au mur
   Décor et pictogrammes en SVG ; l'écran est le vrai composant
   .tv-screen, posé dans un cadre de téléviseur.
   ------------------------------------------------------------ */
.tvscene {
  --sc-wall: color-mix(in oklab, var(--surface) 70%, var(--bg));
  --sc-floor: color-mix(in oklab, var(--bg) 70%, #000);
  --sc-ink: color-mix(in oklab, var(--text) 42%, var(--surface));
  --sc-kit: color-mix(in oklab, var(--text) 18%, var(--surface));
  position: relative;
  margin: 0;
  aspect-ratio: 1200 / 620;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sc-wall);
}
.tvscene__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tvscene .sc-wall { fill: var(--sc-wall); }
.tvscene .sc-floor { fill: var(--sc-floor); }
.tvscene .sc-line { stroke: var(--line); stroke-width: 2; }
.tvscene .sc-rig rect { fill: var(--sc-kit); }
.tvscene .sc-kit { fill: var(--sc-kit); }
.tvscene .sc-target { fill: none; stroke: var(--sc-kit); stroke-width: 5; }
.tvscene .sc-p, .tvscene .sc-coach { --sc-body: var(--sc-ink); fill: var(--sc-body); stroke: var(--sc-body); }
.tvscene .sc-p path, .tvscene .sc-coach path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* pictogrammes : t-shirt de couleur, short et chaussures sombres, membres éloignés un ton plus sombres */
.tvscene .sc-torso { stroke: var(--sc-tee); stroke-width: 26; }
.tvscene .sc-sleeve { stroke: var(--sc-tee); stroke-width: 15; }
.tvscene .sc-arm { stroke-width: 10; }
.tvscene .sc-leg { stroke-width: 13; }
.tvscene .sc-shorts { stroke: #2b2f3a; stroke-width: 17; }
.tvscene .sc-shoe { stroke: #1b1d24; stroke-width: 9; }
.tvscene .sc-far { filter: brightness(0.72); }
.tvscene .sc-head { stroke: none; }
.tvscene .sc-neck { stroke-width: 9; }
.tvscene .sc-shadow ellipse { fill: rgba(0, 0, 0, 0.22); }
.tvscene .sc-machine { fill: none !important; stroke: var(--sc-kit) !important; stroke-width: 9 !important; }
.tvscene .sc-machine--thin { stroke-width: 6 !important; }
.tvscene circle.sc-machine { stroke-width: 7 !important; }
.tvscene .sc-seat { fill: var(--sc-kit) !important; stroke: none !important; }
.tvscene .sc-chain { stroke: var(--sc-kit) !important; stroke-width: 3 !important; }
.tvscene .sc-bell-h { stroke: var(--sc-kit) !important; stroke-width: 5 !important; }
.tvscene .sc-bell { fill: var(--sc-kit) !important; stroke: none !important; }
.tvscene .sc-ball { fill: var(--warn) !important; stroke: none !important; }
.tvscene .sc-arc { stroke: var(--sc-ink) !important; stroke-width: 3 !important; stroke-dasharray: 6 7; opacity: 0.6; }
/* le téléviseur, fixé au mur au-dessus du plateau */
.tvscene__tv {
  position: absolute;
  left: 30%; top: 5%;
  width: 43%;
  padding: 0.45%;
  border-radius: 8px;
  background: #0a0a0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 50px -18px rgba(0, 0, 0, 0.7);
}
.tvscene__tv .tv-screen { border-radius: 3px; }
.tvscene__mount {
  position: absolute; left: 50%; top: 100%;
  width: 16%; height: 6%;
  transform: translateX(-50%);
  background: #0a0a0c;
  border-radius: 0 0 4px 4px;
  opacity: 0.8;
}
.tvscene__cap {
  position: absolute; left: 1rem; bottom: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.tvscene__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; margin-top: 2.2rem; align-items: start; }
.tvsteps { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.tvsteps li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.8rem; align-items: baseline; }
.tvsteps time { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--lime-ink); }
.tvsteps b { display: block; color: var(--text); margin-bottom: 0.1rem; }
.tvsteps div { color: var(--text-2); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 860px) {
  .tvscene { aspect-ratio: auto; height: 60vw; min-height: 240px; }
  .tvscene__tv { left: 20%; width: 60%; }
  .tvscene__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .tvscene__cap { display: none; }
}

/* ------------------------------------------------------------
   PARTENAIRES EXTERNES — la liste /settings/externalPartner
   (Egym Wellpass, ClassPass, apporteurs d'affaires)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   PARTENAIRES EXTERNES — réplique de /settings/externalPartners
   Bandeau ops compact (titre + actions sur une rangée), compteur,
   puis une ligne-carte par partenaire : plaque à monogramme et coin
   hachuré, nom + étiquettes de type et d'état, ligne mono, chevron.
   Tons de plaque repris du produit : Wellpass vert, apporteur
   d'affaires orange, ClassPass plaque sombre.
   ------------------------------------------------------------ */

/* Bandeau : identité à gauche, actions en bas à droite, coin biseauté réduit */
.px-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1.4rem;
  padding: 1rem 1.2rem 1rem;
}
.px-hero::after { width: 150px; height: 58px; }
.px-hero .scr-hero__eyebrow { grid-column: 1 / -1; margin-bottom: 0.55rem; }
.px-hero .scr-hero__id h2 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.px-hero .scr-hero__lede { max-width: 560px; line-height: 1.5; }
.px-hero__actions { display: flex; gap: 0.45rem; }

.px-count {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0.1rem 0 -0.35rem;
}

.px-list { display: flex; flex-direction: column; gap: 0.7rem; }

.px-row {
  --tone: var(--violet);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 76px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
a.px-row:hover,
a.px-row:focus-visible { border-color: var(--lime-edge); background: color-mix(in oklab, var(--surface) 92%, var(--lime)); }
.px-row--ok   { --tone: var(--ok); }
.px-row--warn { --tone: var(--warn); }

/* plaque : bande teintée hachurée, bord droit en biais */
.px-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0 0.55rem 0.7rem;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--tone) 16%, transparent) 0 1px, transparent 1px 7px),
    color-mix(in oklab, var(--tone) 12%, var(--surface));
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  color: var(--tone);
}
.px-plate__code {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.px-plate__ic {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, var(--tone) 45%, transparent);
  background: color-mix(in oklab, var(--tone) 10%, var(--surface));
}
.px-plate__ic .ic { width: 13px; height: 13px; }

/* ClassPass : plaque sombre, identique dans les deux thèmes */
.px-row--cp .px-plate {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 7px),
    #17181d;
  color: #ECECF0;
}
.px-row--cp .px-plate__ic { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); }

.px-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.4rem 0.55rem 0.5rem;
  min-width: 0;
}
.px-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.px-name {
  margin: 0 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.px-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.px-type .ic { width: 10px; height: 10px; }
.px-type--cp { background: #17181d; color: #ECECF0; }
.px-stats {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
}
.px-stats b { color: var(--text-2); font-weight: 700; }
.px-stats .dot { margin: 0 0.35rem; }

.px-chev {
  align-self: center;
  width: 26px; height: 26px;
  margin-right: 0.8rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  color: var(--text-2);
}
.px-chev .ic { width: 13px; height: 13px; }
a.px-row:hover .px-chev { border-color: var(--lime-edge); color: var(--lime-ink); }

/* Lien vers la page détaillée, sous un bloc .split */
.px-more {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-edge);
  padding-bottom: 0.15rem;
}
.px-more:hover { border-bottom-color: var(--lime-ink); }

@media (max-width: 720px) {
  .px-hero { display: block; }
  .px-hero::after { width: 96px; height: 34px; }
  .px-hero .scr-hero__eyebrow { padding-right: 4.5rem; }
  .px-hero__actions { margin-top: 0.8rem; flex-wrap: wrap; }
  .px-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .px-plate { padding-left: 0.5rem; }
  .px-chev { margin-right: 0.55rem; }
}

/* ------------------------------------------------------------
   VISITE GUIDÉE — cartes au même format : une miniature qui
   ressemble au module (écran 16:10), puis titre et texte.
   Les miniatures sont écrites dans _tour/<carte>.html|.css
   et assemblées par _tour/assemble.py.
   ------------------------------------------------------------ */
.tour-card__bar { display: none; }
.tour-card__screen.tc {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  background: color-mix(in oklab, var(--surface) 55%, var(--bg));
  border-bottom: 1px solid var(--line-soft);
}
.tc { font-size: 0.62rem; color: var(--text-2); }
.tc b { color: var(--text); }
.tc-av { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #5f6a76, #414a54); color: #fff; font-size: 0.55rem; font-weight: 700; }
.tc-plate { display: inline-block; padding: 0.08rem 0.5rem; transform: skewX(-12deg); background: linear-gradient(90deg, #7c3aed, #8b5cf6); color: #fff; font-size: 0.52rem; font-weight: 800; font-style: italic; letter-spacing: 0.06em; border-radius: 3px; }
/* 13 cartes sur 3 colonnes : la dernière, seule sur sa rangée, se centre */
@media (min-width: 1025px) {
  .tour-grid > .tour-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
/* Barre latérale en groupes repliables : 7 entrées principales, puis
   « Fidélisation » et « Paramètres », ouverts d'office sur leurs pages. */
.os-grp { padding: 0 0.55rem; margin-top: 2px; }
.os-grp__btn { width: 100%; border: none; background: none; font: inherit; font-size: 0.78rem; font-weight: 500; text-align: left; cursor: pointer; }
.os-grp__chev { margin-left: auto; width: 12px !important; height: 12px !important; transition: transform var(--t-fast); color: var(--text-3); }
.os-grp.open .os-grp__chev { transform: rotate(90deg); }
.os-grp__sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px 0.85rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.os-grp.open .os-grp__sub { display: flex; }
.os-item--sub { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.74rem; }
.os-grp:has(.os-item.active) > .os-grp__btn { color: var(--text); font-weight: 600; }
/* bouton « Messagerie » de la barre du haut, comme dans le logiciel */
.os-msgbtn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-2); font-size: 0.72rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.os-msgbtn .ic { width: 14px; height: 14px; }
.os-msgbtn:hover, .os-msgbtn.is-on { border-color: var(--lime-edge); background: var(--lime-soft); color: var(--text); }
.os-msgbtn__n { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--lime); color: var(--on-lime); font-family: var(--mono); font-size: 0.55rem; font-weight: 700; }
@media (max-width: 759px) { .os-msgbtn { padding: 0.3rem; font-size: 0; gap: 0.2rem; } .os-msgbtn .ic { width: 15px; height: 15px; } }
/* MOBILE — démos (revue 390 px) */
.feed-item { display: block; padding-right: 4.6rem; }
.feed-item time { position: absolute; right: 0.95rem; top: 0.55rem; margin: 0; }
@media (max-width: 759px) {
  /* la barre utilisateur des démos (recherche, cloche, avatar) n'apporte rien sur téléphone */
  .os-window .os-topbar { display: none; }
}
@media (max-width: 720px) {
  .scr-hero--row .scr-pulse { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
  .scr-hero--row .scr-pulse .pstat:last-child { grid-column: 1 / -1; }
}
/* TOUR-CARDS:BEGIN */
/* carte : abonnements */
/* abonnements : la fiche d'un abonnement (Léa B., Illimité, SEPA) et sa
   frise d'échéances — deux payées, une pause demandée depuis l'app, une
   remise de 20 % sur deux mois, un changement de tarif en novembre —
   puis les actions de la fiche. Tailles en cqh : la carte est en 16:10. */
.tc-abonnements {
  position: absolute; inset: 0;
  container-type: size;
  background: var(--bg);
}
.tc-abonnements__in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 3cqh;
  padding: 4.6cqh 4.5cqw 4.6cqh;
  color: var(--text-2);
}

/* en-tête : membre, produit, état, montant courant */
.tc-abonnements__head { display: flex; align-items: center; gap: 2cqw; }
.tc-abonnements__av { width: 9.6cqh; height: 9.6cqh; font-size: 3.4cqh; background: linear-gradient(135deg, #7c83f0, #5b5fd6); }
.tc-abonnements__who { display: flex; flex-direction: column; gap: 0.4cqh; min-width: 0; }
.tc-abonnements__who b { font-size: 4.8cqh; font-weight: 800; line-height: 1.05; color: var(--text); letter-spacing: -0.01em; }
.tc-abonnements__who span { font-size: 3.4cqh; color: var(--text-3); white-space: nowrap; }
.tc-abonnements__state {
  display: inline-flex; align-items: center; gap: 1cqw;
  align-self: flex-start; margin-top: 0.6cqh;
  padding: 0.5cqh 1.6cqw; border-radius: 99px;
  background: color-mix(in oklab, var(--ok) 16%, transparent);
  color: var(--ok); font-size: 3.2cqh; font-weight: 700; white-space: nowrap;
}
.tc-abonnements__state::before { content: ""; width: 1.8cqh; height: 1.8cqh; border-radius: 50%; background: currentColor; }
.tc-abonnements__price { margin-left: auto; display: flex; align-items: baseline; gap: 0.6cqw; white-space: nowrap; }
.tc-abonnements__price b { font-size: 7cqh; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.02em; }
.tc-abonnements__price span { font-size: 3.3cqh; color: var(--text-3); }

/* ligne de paiement */
.tc-abonnements__meta { display: flex; align-items: center; gap: 1.4cqw; flex-wrap: nowrap; }
.tc-abonnements__meta > span {
  display: inline-flex; align-items: center; gap: 1cqw;
  padding: 0.8cqh 1.6cqw; border: 1px solid var(--line); border-radius: 1.6cqh;
  background: var(--surface);
  font-family: var(--mono); font-size: 3.1cqh; color: var(--text-2); white-space: nowrap;
}
.tc-abonnements__meta b { color: var(--text); font-weight: 700; }
.tc-abonnements__sepa {
  padding: 0.2cqh 0.9cqw; border-radius: 0.8cqh;
  background: var(--info); color: var(--bg);
  font-style: normal; font-weight: 800; font-size: 2.9cqh; letter-spacing: 0.04em;
}

/* frise des échéances */
.tc-abonnements__plan {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 2.4cqh 2.6cqw 2cqh;
  border: 1px solid var(--line); border-radius: 3cqh; background: var(--surface);
}
.tc-abonnements__cap { font-family: var(--mono); font-size: 3.1cqh; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tc-abonnements__cap span { color: var(--lime-ink); }
.tc-abonnements__cols { flex: 1; min-height: 0; display: flex; gap: 1.2cqw; margin-top: 1.4cqh; }
.tc-abonnements__col {
  flex: 1; min-width: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center; row-gap: 0.7cqh;
}
.tc-abonnements__tag {
  height: 4.4cqh; padding: 0 1cqw; border-radius: 1cqh;
  display: inline-flex; align-items: center;
  font-size: 3.1cqh; font-weight: 700; white-space: nowrap; line-height: 1;
}
.tc-abonnements__tag--none { visibility: hidden; }
.tc-abonnements__tag--pause { background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.tc-abonnements__tag--promo { background: color-mix(in oklab, var(--pink) 18%, transparent); color: var(--pink); font-family: var(--mono); }
.tc-abonnements__tag--price { background: color-mix(in oklab, var(--indigo) 22%, transparent); color: var(--indigo); }

.tc-abonnements__bar {
  align-self: end; justify-self: stretch;
  height: var(--h); min-height: 0;
  display: grid; place-items: center;
  border-radius: 1.2cqh;
}
.tc-abonnements__bar svg { width: 4.6cqh; height: 4.6cqh; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-abonnements__bar em { font-style: normal; font-family: var(--mono); font-size: 3cqh; font-weight: 700; white-space: nowrap; }
.tc-abonnements__bar--paid {
  background: color-mix(in oklab, var(--ok) 22%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--ok) 45%, transparent);
  color: var(--ok);
}
.tc-abonnements__bar--pause {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--warn) 30%, var(--surface)) 0 3px,
    var(--surface) 3px 6px);
  border: 1px dashed color-mix(in oklab, var(--warn) 60%, transparent);
  color: var(--warn);
}
.tc-abonnements__bar--pause em { padding: 0.5cqh 0.6cqw; text-align: center; line-height: 1.15; border-radius: 0.8cqh; background: var(--surface); font-size: 2.9cqh; }
.tc-abonnements__bar--next {
  background: var(--lime-soft);
  border: 1px solid var(--lime-edge);
  color: var(--lime-ink);
}
.tc-abonnements__bar--soon {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--indigo) 34%, var(--surface)) 0 2px,
    var(--surface) 2px 4px);
  border: 1px solid color-mix(in oklab, var(--indigo) 45%, transparent);
}
.tc-abonnements__m { font-family: var(--mono); font-size: 3.1cqh; color: var(--text-3); line-height: 1; }
.tc-abonnements__amt { font-family: var(--mono); font-size: 3.3cqh; letter-spacing: -0.04em; font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1; }
.tc-abonnements__amt--off { color: var(--text-3); }

.tc-abonnements__today { position: relative; flex: 0 0 1px; align-self: stretch; margin-top: 5cqh; margin-bottom: 7cqh; background: var(--lime-ink); }
.tc-abonnements__today::after {
  content: "auj."; position: absolute; top: -4.6cqh; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 3cqh; font-weight: 700; color: var(--lime-ink); white-space: nowrap;
}

/* actions de la fiche */
.tc-abonnements__acts { display: flex; gap: 1.4cqw; }
.tc-abonnements__act {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 1cqw;
  padding: 1.3cqh 1cqw; border: 1px solid var(--line); border-radius: 1.8cqh;
  background: var(--surface-2);
  font-size: 3.3cqh; font-weight: 600; color: var(--text); white-space: nowrap;
}
.tc-abonnements__act svg { width: 3.8cqh; height: 3.8cqh; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-abonnements__act--on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 700; }
.tc-abonnements__act--end { color: var(--danger); }

/* carte : adherents */
.tc-adherents {
  position: absolute; inset: 0;
  container-type: size;
  font-family: var(--sans);
  color: var(--text-2);
}
.tc-adherents b { color: var(--text); font-weight: 600; }

/* --- liste des clients (arrière-plan) --- */
.tc-adherents__list {
  position: absolute;
  top: 3cqw; left: 3cqw; bottom: 0; right: 3cqw;
  padding: 2cqw 2.2cqw 0;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 2.4cqw 2.4cqw 0 0;
  background: var(--surface);
  overflow: hidden;
}
.tc-adherents__hero {
  position: relative; overflow: hidden;
  padding: 1.3cqw 2cqw 1.4cqw;
  border: 1px solid var(--line); border-radius: 1.8cqw;
  background: linear-gradient(100deg, var(--lime-soft), var(--surface) 62%);
}
.tc-adherents__wedge {
  position: absolute; top: -2cqw; right: -5cqw;
  width: 26cqw; height: 8cqw;
  background: var(--lime); opacity: 0.85;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.tc-adherents__title {
  position: relative; display: block;
  margin-bottom: 1cqw;
  font-size: 3.1cqw; font-weight: 800 !important; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--lime-ink) !important;
}
.tc-adherents__views { position: relative; display: flex; gap: 1.1cqw; }
.tc-adherents__chip {
  display: inline-flex; align-items: center; gap: 0.8cqw;
  padding: 0.5cqw 1.5cqw;
  border: 1px solid var(--line); border-radius: 5cqw;
  background: var(--surface);
  font-size: 2.05cqw; white-space: nowrap; color: var(--text-2);
}
.tc-adherents__chip em { font-style: normal; font-family: var(--mono); font-weight: 700; color: var(--danger); }
.tc-adherents__chip--on { background: var(--lime-soft); border-color: var(--lime-edge); color: var(--lime-ink); font-weight: 600; }
.tc-adherents__dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; flex: none; }
.tc-adherents__dot--danger { background: var(--danger); }
.tc-adherents__dot--warn { background: var(--warn); }

.tc-adherents__count { margin: 1.3cqw 0 0.5cqw; font-size: 1.95cqw; color: var(--text-3); }

.tc-adherents__head,
.tc-adherents__row {
  display: grid;
  grid-template-columns: 16.5cqw 21.5cqw 10.5cqw;
  align-items: center; column-gap: 1.2cqw;
}
.tc-adherents__head {
  padding: 0 1.2cqw 0.8cqw;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 1.75cqw; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.tc-adherents__row {
  padding: 0.95cqw 1.2cqw;
  border-bottom: 1px solid var(--line-soft);
  font-size: 2.05cqw;
}
.tc-adherents__row--sel {
  background: var(--lime-soft);
  box-shadow: inset 0.6cqw 0 0 var(--lime);
  border-radius: 1cqw;
  border-bottom-color: transparent;
}
.tc-adherents__who { display: flex; align-items: center; gap: 1.3cqw; min-width: 0; }
.tc-adherents__who b { font-size: 2.3cqw; white-space: nowrap; }
.tc-adherents__av {
  display: grid; place-items: center; flex: none;
  width: 4.8cqw; height: 4.8cqw; border-radius: 50%;
  font-family: var(--mono); font-size: 1.6cqw; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #5f6a76, #414a54);
}
.tc-adherents__av--a { background: linear-gradient(135deg, #8b93f8, #6366f1); }
.tc-adherents__av--b { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tc-adherents__av--c { background: linear-gradient(135deg, #f472b6, #db2777); }
.tc-adherents__av--d { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.tc-adherents__av--e { background: linear-gradient(135deg, #34d399, #059669); }
.tc-adherents__av--lg { width: 8cqw; height: 8cqw; font-size: 2.5cqw; }

.tc-adherents__st { display: inline-flex; align-items: center; gap: 0.9cqw; white-space: nowrap; color: var(--text-2); }
.tc-adherents__st i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--ok); flex: none; }
.tc-adherents__st--fail { color: var(--danger); font-weight: 600; }
.tc-adherents__st--fail i { background: var(--danger); }
.tc-adherents__st--wait { color: var(--warn); }
.tc-adherents__st--wait i { background: var(--warn); }
.tc-adherents__pill {
  justify-self: start;
  padding: 0.35cqw 1.2cqw;
  border: 1px solid var(--line); border-radius: 1cqw;
  background: var(--surface-2);
  font-size: 1.9cqw; white-space: nowrap;
}

/* --- fiche client (surimpression) --- */
.tc-adherents__sheet {
  position: absolute;
  top: 2.4cqw; right: 2.4cqw; bottom: 2.4cqw;
  width: 37cqw;
  padding: 2.4cqw 2.6cqw;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2cqw;
  border: 1px solid var(--lime-edge);
  border-radius: 2.4cqw;
  background: var(--surface);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.28), 0 0 0 0.6cqw var(--lime-soft);
}
.tc-adherents__id { display: flex; align-items: center; gap: 1.8cqw; padding-bottom: 1.8cqw; border-bottom: 1px solid var(--line); }
.tc-adherents__id b { display: block; font-size: 2.9cqw; font-weight: 700; }
.tc-adherents__id small { display: block; margin-top: 0.3cqw; font-size: 1.9cqw; color: var(--text-3); }
.tc-adherents__field small {
  display: block; margin-bottom: 0.6cqw;
  font-family: var(--mono); font-size: 1.7cqw; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.tc-adherents__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; font-size: 2.2cqw; }
.tc-adherents__mono { font-family: var(--mono); font-size: 2cqw; color: var(--text-2); }
.tc-adherents__ok { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.9cqw; font-weight: 600; color: var(--ok); }
.tc-adherents__ok::before { content: ""; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: currentColor; }
.tc-adherents__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.55cqw; }
.tc-adherents__grid i { aspect-ratio: 1; border-radius: 0.6cqw; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
.tc-adherents__grid .l1 { background: color-mix(in oklab, var(--lime) 32%, var(--surface-2)); }
.tc-adherents__grid .l2 { background: color-mix(in oklab, var(--lime) 64%, var(--surface-2)); }
.tc-adherents__grid .l3 { background: var(--lime); }
.tc-adherents__stat { margin-top: 0.9cqw; font-size: 1.9cqw; color: var(--text-3); }
.tc-adherents__stat b { font-family: var(--mono); color: var(--lime-ink); font-weight: 700; }

/* carte : api */
.tc-api { position: absolute; inset: 0; container-type: size; }
.tc-api__in {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 3cqw;
  padding: 4.2cqw 4cqw;
  font-size: clamp(7.4px, 2.55cqw, 11.5px);
  line-height: 1.2;
  color: var(--text-2);
}
.tc-api__kick { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* panneau Exports */
.tc-api__exp {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0.8em;
  overflow: hidden;
  box-shadow: 0 0.6em 1.6em -1em rgba(0, 0, 0, 0.35);
}
.tc-api__head { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 0.9em; border-bottom: 1px solid var(--line-soft); }
.tc-api__head b { font-size: 1.12em; color: var(--text); }
.tc-api__count {
  margin-left: auto; min-width: 1.9em; padding: 0.15em 0.45em; border-radius: 1em; text-align: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.86em;
  background: var(--lime-soft); color: var(--lime-ink); border: 1px solid var(--lime-edge);
}
.tc-api__rows { list-style: none; margin: 0; padding: 0.55em 0.6em; display: grid; gap: 0.4em; flex: 1; grid-auto-rows: 1fr; }
.tc-api__row {
  display: flex; align-items: center; gap: 0.5em; min-width: 0;
  padding: 0.38em 0.4em 0.38em 0.65em; border-radius: 0.55em;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text);
}
.tc-api__lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tc-api__fmt { font-family: var(--mono); font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); }
.tc-api__dl {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; border-radius: 0.45em;
  background: var(--lime); color: var(--on-lime);
}
.tc-api__dl .ic { width: 1.05em; height: 1.05em; }
.tc-api__row + .tc-api__row .tc-api__dl { background: transparent; color: var(--lime-ink); border: 1px solid var(--lime-edge); }
.tc-api__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
  padding: 0.6em 0.9em; border-top: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--surface) 70%, var(--bg));
  font-family: var(--mono); font-size: 0.86em; color: var(--text-3); white-space: nowrap;
}
.tc-api__foot b { color: var(--lime-ink); font-weight: 700; }

/* connecteurs */
.tc-api__con { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; padding-top: 0.2em; }
.tc-api__con > .tc-api__kick { padding-left: 0.2em; }
.tc-api__plug {
  --tone: var(--ok);
  position: relative; display: flex; align-items: center; gap: 0.55em; min-width: 0; flex: 1;
  padding: 0.35em 0.6em 0.35em 0.35em; border-radius: 0.65em;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font-weight: 700;
}
.tc-api__plug > span { display: flex; flex-direction: column; gap: 0.12em; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-api__plug small { font-family: var(--mono); font-weight: 500; font-size: 0.8em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.tc-api__mono {
  display: grid; place-items: center; width: 2.4em; height: 2.4em; flex: none; border-radius: 0.5em;
  font-family: var(--mono); font-style: normal; font-weight: 800; font-size: 0.86em; letter-spacing: 0.02em;
  color: var(--tone);
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--tone) 18%, transparent) 0 1px, transparent 1px 5px),
    color-mix(in oklab, var(--tone) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--tone) 40%, transparent);
}
.tc-api__mono .ic { width: 1.2em; height: 1.2em; }
.tc-api__on {
  width: 0.55em; height: 0.55em; flex: none; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0.22em color-mix(in oklab, var(--ok) 22%, transparent);
}
/* ClassPass : plaque sombre, identique dans les deux thèmes */
.tc-api__plug--cp .tc-api__mono {
  color: #ECECF0; border-color: rgba(255, 255, 255, 0.22);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px), #17181d;
}
.tc-api__plug--ics { --tone: var(--info); }
.tc-api__plug--soon {
  --tone: var(--text-3);
  background: transparent; border-style: dashed; color: var(--text-2);
}
.tc-api__plug--soon small { color: var(--warn); }

/* carte : app */
/* App membre : un téléphone qui sort du bas de la carte, avec une vraie
   capture du tableau de bord adhérent (webview). Tailles en cqw de la carte. */
.tc-app {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 70% at 70% 60%, color-mix(in oklab, var(--lime) 16%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--line) 90%, transparent) 1px, transparent 1.2px) 0 0 / 4cqw 4cqw,
    color-mix(in oklab, var(--surface-2) 60%, var(--bg));
}
.tc-app__side {
  position: absolute;
  left: 6cqw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.6cqw;
  width: 36cqw;
}
.tc-app__kick {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: max(7px, 2.5cqw);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tc-app__os {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.1cqw 2.4cqw;
  border: 1px solid var(--lime-edge);
  border-radius: 99px;
  background: var(--lime-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: max(7.5px, 2.9cqw);
  line-height: 1;
}
.tc-app__os b { color: var(--lime-ink); font-weight: 700; }
.tc-app__os i {
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  background: var(--lime-ink);
  opacity: 0.6;
}
.tc-app__list {
  margin: 0.4cqw 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.8cqw;
}
.tc-app__list li {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  font-size: max(8px, 3.3cqw);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.tc-app__list .ic {
  width: 5.4cqw;
  height: 5.4cqw;
  padding: 1.2cqw;
  flex: none;
  border-radius: 1.6cqw;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--lime-ink);
}
.tc-app__phone {
  position: absolute;
  left: 33cqw;
  top: 4.5cqw;
  width: 62cqw;
  aspect-ratio: 9 / 19;
  padding: 1.5cqw;
  border-radius: 7.5cqw;
  background: linear-gradient(145deg, #2c2f35, #0e0f12 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 3cqw 8cqw -2cqw rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
  transform-origin: 50% 100%;
}
.tc-app__scr {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6cqw;
  background: #fff;
}
.tc-app__scr img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6.5cqw;
  object-fit: cover;
  object-position: top;
}
.tc-app__island {
  position: absolute;
  top: 1.6cqw;
  left: 50%;
  width: 13cqw;
  height: 3.6cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #0b0c0e;
}

/* capture agrandie : on montre le haut du tableau de bord, lisible, plutôt que tout l'écran en réduction */
.tc-app__side { width: 28cqw; }
.tc-app__side { width: 26cqw; left: 5cqw; }
.tc-app__os { flex-direction: column; align-items: flex-start; gap: 1cqw; padding: 0; border: none; background: none; }
.tc-app__os i { display: none; }
.tc-app__os b { padding: 0.6cqw 2.2cqw; border-radius: 99px; border: 1px solid var(--lime-edge); background: var(--lime-soft); color: var(--lime-ink); }

/* carte : community */
/* community : podium du classement, plaques de grade, séries en cours */
.tc-community {
  position: absolute; inset: 0;
  container-type: size;
}
.tc-community__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tc-community__in {
  position: absolute; inset: 0;
  font-size: 2.5cqw;
  display: flex; flex-direction: column;
  padding: 3.6cqw 5cqw 3.6cqw;
  gap: 2.4cqw;
  box-sizing: border-box;
}

.tc-community__head { display: flex; align-items: center; gap: 0.6em; }
.tc-community__title { font-weight: 700; color: var(--text); font-size: 1.12em; }
.tc-community__tag, .tc-community__scope {
  font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; color: var(--text-3);
}
.tc-community__scope {
  margin-left: auto; padding: 0.25em 0.7em; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
}

/* podium */
.tc-community__stage {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 1.14fr 1fr; align-items: end; gap: 2.2cqw;
  border-bottom: 2px solid var(--line);
}
.tc-community__col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tc-community__av {
  position: relative; display: grid; place-items: center; flex: none;
  width: 3.7em; height: 3.7em; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tc-community-av) 80%, #fff), var(--tc-community-av));
  color: #fff; font-weight: 700; font-size: 0.95em;
  box-shadow: 0 0 0 2px var(--surface);
}
.tc-community__col--1 .tc-community__av { width: 4.5em; height: 4.5em; }
.tc-community__av i {
  position: absolute; right: -0.25em; bottom: -0.25em;
  display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  font-style: normal; font-family: var(--mono); font-size: 0.78em; font-weight: 800; line-height: 1;
  border: 2px solid var(--surface);
}
.tc-community__col--1 .tc-community__av i { background: #ffd76a; color: #4a3600; }
.tc-community__col--2 .tc-community__av i { background: #d5dce6; color: #333c47; }
.tc-community__col--3 .tc-community__av i { background: #d9955b; color: #3d2408; }
.tc-community__line { display: flex; align-items: center; gap: 0.35em; margin-top: 0.45em; max-width: 100%; }
.tc-community__line .tc-community__flame { margin-top: 0; }
.tc-community__name {
  min-width: 0;
  font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* plaque de grade : deux barres inclinées + plaque teintée */
.tc-community__badge { display: inline-flex; align-items: stretch; height: 1.9em; margin-top: 0.4em; white-space: nowrap; }
.tc-community__bars { display: flex; gap: 0.18em; flex: none; }
.tc-community__bars i {
  width: 0.3em; background: var(--tc-community-rank); transform: skewX(-12deg); border-radius: 1px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tc-community-rank) 35%, transparent);
}
.tc-community__plate {
  display: flex; align-items: center;
  transform: skewX(-12deg);
  background: color-mix(in srgb, var(--tc-community-rank) 15%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--tc-community-rank) 40%, transparent);
  border-left: 0; border-radius: 0.3em;
  box-shadow: 0 0.2em 0.7em -0.2em color-mix(in srgb, var(--tc-community-rank) 45%, transparent);
}
.tc-community__plate > span {
  transform: skewX(12deg); display: inline-flex; align-items: center; gap: 0.35em; padding: 0 0.6em 0 0.5em;
}
.tc-community__plate svg { width: 1.1em; height: 1.1em; color: var(--tc-community-rank); flex: none; }
.tc-community__plate em {
  font-style: italic; font-weight: 800; font-size: 0.8em; letter-spacing: 0.03em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tc-community-rank) 70%, var(--text));
}
.tc-community__plate b {
  font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tc-community-rank) 45%, var(--text));
}

/* flamme de série (ambre, comme la flame-chip du module) */
.tc-community__flame {
  display: inline-flex; align-items: center; gap: 0.25em; margin-top: 0.4em;
  padding: 0.15em 0.55em 0.15em 0.4em; border-radius: 99px;
  font-family: var(--mono); font-size: 0.82em; font-weight: 700; white-space: nowrap;
  background: color-mix(in oklab, #e0a112 16%, var(--surface));
  border: 1px solid color-mix(in oklab, #e0a112 40%, transparent);
  color: color-mix(in oklab, #e0a112 55%, var(--text));
}
.tc-community__flame svg { width: 1.05em; height: 1.05em; color: #e0a112; }

.tc-community__block {
  width: 100%; margin-top: 0.5em;
  display: grid; place-items: center;
  border-radius: 0.55em 0.55em 0 0; border: 1px solid var(--line); border-bottom: 0;
  font-family: var(--mono); font-weight: 800; font-size: 1.05em; line-height: 1;
}
.tc-community__col--1 .tc-community__block {
  height: 3.6em;
  background: linear-gradient(180deg, color-mix(in oklab, #ffd76a 42%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #ffd76a 55%, transparent);
  color: color-mix(in oklab, #c98a00 70%, var(--text));
}
.tc-community__col--2 .tc-community__block {
  height: 2.6em;
  background: linear-gradient(180deg, color-mix(in oklab, #d5dce6 50%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #98a4b4 45%, transparent);
  color: color-mix(in oklab, #7d8896 70%, var(--text));
}
.tc-community__col--3 .tc-community__block {
  height: 1.6em;
  background: linear-gradient(180deg, color-mix(in oklab, #d9955b 42%, var(--surface)), var(--surface));
  border-color: color-mix(in oklab, #d9955b 50%, transparent);
  color: color-mix(in oklab, #b0703a 70%, var(--text));
}

/* ligne 4 : la suivante, à 4 séances du grade Warrior */
.tc-community__row {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.7em; border-radius: 0.7em;
  background: var(--surface); border: 1px solid var(--lime-edge);
}
.tc-community__pos { font-family: var(--mono); font-weight: 700; color: var(--text-3); width: 0.8em; }
.tc-community__av--sm { width: 2.3em; height: 2.6em; font-size: 0.85em; box-shadow: none; }
.tc-community__who { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6em; row-gap: 0.2em; }
.tc-community__who b { color: var(--text); white-space: nowrap; }
.tc-community__who small { grid-column: 1 / -1; font-family: var(--mono); font-size: 0.8em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-community__prog { position: relative; height: 0.45em; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.tc-community__prog i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #3F51B5, #8B5CF6); }
.tc-community__badge--sm { margin-top: 0; height: 1.75em; }
.tc-community__row .tc-community__flame { margin-top: 0; }

/* carte : crm */
/* Prospection : kanban des stades, une carte glissée d'« Essai 2 » vers « Paiement ».
   Tout est en cqw : la miniature garde la même composition de 1440 à 390 px. */
.tour-card__screen:has(> .tc-crm) { container-type: inline-size; }
.tc-crm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 3.2cqw;
  padding: 3.2cqw 3.2cqw 0;
  font-size: 2.45cqw;
  line-height: 1.25;
  color: var(--text-2);
}

/* bandeau de page, comme .pg-hero du logiciel */
.tc-crm__hero {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11.5cqw;
  padding: 0 21cqw 0 3.2cqw;
  border: 1px solid var(--line);
  border-radius: 2.2cqw;
  background: linear-gradient(100deg, var(--lime-soft), var(--surface) 62%);
}
.tc-crm__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--scan) 3px 4px);
}
.tc-crm__wedge {
  position: absolute;
  top: -2cqw;
  right: -5cqw;
  width: 24cqw;
  height: 15cqw;
  background: var(--lime);
  opacity: 0.85;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.tc-crm__title {
  position: relative;
  font-size: 3.9cqw;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lime-ink) !important;
}
.tc-crm__btn {
  position: relative;
  padding: 1.2cqw 2.4cqw;
  border-radius: 1.4cqw;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--mono);
  font-size: 2.1cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* colonnes de stades */
.tc-crm__board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.9cqw;
  align-items: stretch;
}
.tc-crm__col {
  display: flex;
  flex-direction: column;
  gap: 1.35cqw;
  min-width: 0;
  padding: 0 0.9cqw;
  margin: 0 -0.9cqw;
  border-radius: 1.8cqw 1.8cqw 0 0;
}
.tc-crm__head {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  margin: 0 0 0.4cqw;
  padding: 0.9cqw 0 1.1cqw;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.tc-crm__head i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 500;
  color: var(--text-3);
}

/* cartes prospect : nom puis ancienneté à droite */
.tc-crm__card {
  display: block;
  padding: 1.5cqw 1.3cqw 1.2cqw 1.4cqw;
  border-radius: 1.3cqw;
  border-left: 0.75cqw solid var(--text-3);
  background: var(--surface-2);
}
.tc-crm__card b {
  display: block;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-crm__card em {
  display: block;
  margin-top: 0.2cqw;
  text-align: right;
  font-style: normal;
  font-size: 0.88em;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-crm__card.is-new { border-left-color: #eab308; background: color-mix(in oklab, #eab308 13%, var(--surface)); }
.tc-crm__card.is-new b { color: var(--warn); }
.tc-crm__card.is-late { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger) 11%, var(--surface)); }
.tc-crm__card.is-late b, .tc-crm__card.is-late em { color: var(--danger); }
.tc-crm__card.is-ok { border-left-color: #22c55e; background: color-mix(in oklab, #22c55e 11%, var(--surface)); }
.tc-crm__card.is-ok b { color: var(--ok); }
.tc-crm__card.is-sched { border-left-color: var(--info); background: color-mix(in oklab, var(--info) 12%, var(--surface)); }
.tc-crm__card.is-sched b, .tc-crm__card.is-sched em { color: var(--info); }

/* glisser-déposer : place laissée vide, colonne cible éclairée, carte en vol */
.tc-crm__slot {
  height: 8.2cqw;
  border-radius: 1.3cqw;
  border: 1px dashed var(--line);
}
.tc-crm__col.is-drop { background: linear-gradient(180deg, var(--lime-soft), transparent 85%); }
.tc-crm__col.is-drop .tc-crm__head { border-bottom-color: var(--lime-edge); }
.tc-crm__ghost {
  height: 8.2cqw;
  border-radius: 1.3cqw;
  border: 1px dashed var(--lime-edge);
  background: var(--lime-soft);
}
.tc-crm__drag {
  position: absolute;
  left: 67.5cqw;
  top: 44cqw;
  width: 17.5cqw;
  transform: rotate(-4deg);
  z-index: 2;
}
.tc-crm__drag .tc-crm__card {
  box-shadow: 0 0 0 1px var(--lime-edge), 0 2.6cqw 4cqw -1.6cqw rgba(0, 0, 0, 0.55);
  background: color-mix(in oklab, var(--info) 14%, var(--surface));
}
.tc-crm__cursor {
  position: absolute;
  right: -2.2cqw;
  bottom: -3.4cqw;
  width: 3.4cqw;
  height: auto;
  transform: rotate(4deg);
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* carte : messagerie */
/* Messagerie : bandeau « Vos conversations » et ses compteurs, colonne des
   conversations (filtres, pastille de non-lus, coches lues), fil sur fond
   doodle avec bulles envoyées grises, zone de saisie.
   Tout est en cqw : même composition de 1440 à 390 px. */
.tour-card__screen:has(> .tc-messagerie) { container-type: inline-size; }
.tc-messagerie {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
  padding: 2.4cqw 2.4cqw 0;
  font-size: 2cqw;
  line-height: 1.25;
  color: var(--text-2);
  --tc-messagerie-out: color-mix(in oklab, var(--surface-2) 80%, var(--text) 9%);
}
.tc-messagerie__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tc-messagerie svg { flex: none; }

/* bandeau */
.tc-messagerie__hero {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: 9.6cqw;
  padding: 0 15cqw 0 2.6cqw;
  border: 1px solid var(--line);
  border-radius: 2cqw;
  background: linear-gradient(110deg, var(--lime-soft), var(--surface) 60%);
}
.tc-messagerie__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--scan) 3px 4px);
}
.tc-messagerie__wedge {
  position: absolute;
  top: -2cqw;
  right: -4cqw;
  width: 17cqw;
  height: 15cqw;
  background: var(--lime);
  opacity: 0.85;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
}
.tc-messagerie__hero-t { position: relative; display: flex; flex-direction: column; gap: 0.5cqw; margin-right: auto; min-width: 0; }
.tc-messagerie__eyebrow {
  display: flex; align-items: center; gap: 0.8cqw;
  font-family: var(--mono); font-size: 1.75cqw; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lime-ink); white-space: nowrap;
}
.tc-messagerie__eyebrow i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--ok); }
.tc-messagerie__title {
  font-size: 3.5cqw; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; line-height: 1;
}
.tc-messagerie__title span { color: var(--lime-ink); }
.tc-messagerie__count {
  position: relative;
  display: flex; flex-direction: column; gap: 0.3cqw;
  padding: 1cqw 1.8cqw;
  border: 1px solid var(--line);
  border-radius: 1.3cqw;
  background: var(--surface);
}
.tc-messagerie__count small {
  font-family: var(--mono); font-size: 1.7cqw; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.tc-messagerie__count b { display: flex; align-items: center; gap: 0.8cqw; font-family: var(--mono); font-size: 2.4cqw; color: var(--text); line-height: 1; }
.tc-messagerie__count b i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; }
.tc-messagerie__count .is-unread { background: var(--ok); }
.tc-messagerie__count .is-wait { background: var(--warn); }

/* application : colonne + fil */
.tc-messagerie__app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 38.5cqw minmax(0, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 2cqw 2cqw 0 0;
  overflow: hidden;
  background: var(--surface);
}

.tc-messagerie__list {
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  min-width: 0;
  padding: 1.6cqw 1.4cqw 0;
  border-right: 1px solid var(--line);
}
.tc-messagerie__search {
  display: flex; align-items: center; gap: 0.8cqw;
  padding: 0.9cqw 1.2cqw;
  border: 1px solid var(--line);
  border-radius: 1.1cqw;
  font-family: var(--mono); font-size: 1.8cqw; color: var(--text-3); white-space: nowrap; overflow: hidden;
}
.tc-messagerie__search svg { width: 1.9cqw; height: 1.9cqw; }
.tc-messagerie__tabs {
  display: grid; grid-template-columns: auto auto auto; justify-content: space-between;
  padding: 0.45cqw;
  border-radius: 1.1cqw;
  background: var(--surface-2);
  font-family: var(--mono); font-size: 1.65cqw; letter-spacing: 0; text-transform: uppercase;
  white-space: nowrap;
}
.tc-messagerie__tabs > * { display: flex; align-items: center; justify-content: center; gap: 0.5cqw; padding: 0.7cqw 1cqw; color: var(--text-3); }
.tc-messagerie__tabs b { border-radius: 0.8cqw; background: var(--surface); color: var(--lime-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tc-messagerie__tabs em { font-style: normal; padding: 0 0.5cqw; border-radius: 0.5cqw; background: var(--surface); color: var(--text-2); }

.tc-messagerie__conv {
  display: flex; align-items: center; gap: 1.1cqw;
  min-width: 0;
  padding: 0.95cqw 1cqw;
  border-radius: 1.2cqw;
}
.tc-messagerie__conv.is-active {
  background: var(--lime-soft);
  box-shadow: inset 0.45cqw 0 0 var(--lime-ink);
}
.tc-messagerie .tc-messagerie__av {
  width: 5.2cqw; height: 5.2cqw;
  font-size: 1.85cqw; font-weight: 600;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tc-messagerie-av) 78%, #fff), var(--tc-messagerie-av));
}
.tc-messagerie__conv-t { display: flex; flex-direction: column; gap: 0.35cqw; min-width: 0; flex: 1; }
.tc-messagerie__conv-l { display: flex; align-items: center; gap: 0.6cqw; min-width: 0; }
.tc-messagerie__conv-l b { font-size: 2.2cqw; font-weight: 700; color: var(--text); white-space: nowrap; margin-right: auto; }
.tc-messagerie__conv-l time { font-family: var(--mono); font-size: 1.75cqw; color: var(--text-3); }
.tc-messagerie__last {
  display: flex; align-items: center; gap: 0.4cqw;
  min-width: 0; flex: 1;
  font-size: 2cqw; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-messagerie__last svg { width: 2.2cqw; height: 1.5cqw; color: var(--text-3); }
.tc-messagerie__last .tc-messagerie__clip { width: 1.7cqw; height: 1.7cqw; }
.tc-messagerie .tc-messagerie__read { color: var(--lime-ink); }
.tc-messagerie__conv.is-unread b,
.tc-messagerie__conv.is-unread .tc-messagerie__last { color: var(--text); font-weight: 700; }
.tc-messagerie__conv.is-unread time { color: var(--lime-ink); font-weight: 700; }
.tc-messagerie__conv-l em {
  flex: none; display: grid; place-items: center;
  min-width: 2.6cqw; height: 2.6cqw; padding: 0 0.5cqw; border-radius: 0.6cqw;
  background: var(--lime); color: var(--on-lime);
  font-style: normal; font-family: var(--mono); font-size: 1.7cqw; font-weight: 800;
}

/* fil */
.tc-messagerie__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tc-messagerie__head {
  flex: none;
  display: flex; align-items: center; gap: 1.2cqw;
  padding: 1.2cqw 1.6cqw;
  border-bottom: 1px solid var(--line);
}
.tc-messagerie__head .tc-messagerie__av { width: 4.6cqw; height: 4.6cqw; font-size: 1.7cqw; }
.tc-messagerie__head-t { display: flex; flex-direction: column; gap: 0.2cqw; min-width: 0; margin-right: auto; }
.tc-messagerie__head-t > span { display: flex; align-items: center; gap: 0.8cqw; }
.tc-messagerie__head-t b { font-size: 2.3cqw; }
.tc-messagerie__head-t em {
  font-style: normal; font-family: var(--mono); font-size: 1.6cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.15cqw 0.6cqw; border-radius: 0.5cqw;
  background: var(--ok-bg, var(--lime-soft)); color: var(--ok);
}
.tc-messagerie__head-t small { font-size: 1.85cqw; color: var(--text-3); white-space: nowrap; }
.tc-messagerie__fiche {
  padding: 0.8cqw 1.3cqw;
  border: 1px solid var(--line);
  border-radius: 1cqw;
  font-family: var(--mono); font-size: 1.65cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); white-space: nowrap;
}

.tc-messagerie__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.9cqw;
  padding: 1.2cqw 2cqw 1.2cqw;
  background: var(--surface-2);
  isolation: isolate;
}
.tc-messagerie__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  opacity: 0.09;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(22 20) rotate(-22) scale(1.3) translate(-12 -12)' d='M8 12h8M5 8h3v8H5zM16 8h3v8h-3zM3 10h2v4H3zM19 10h2v4h-2z'/%3E%3Cpath transform='translate(80 26) rotate(12) scale(1.25) translate(-12 -12)' d='M4.5 14a7.5 7.5 0 1 0 15 0a7.5 7.5 0 1 0-15 0M12 10v4l2.5 2M10 2.5h4M12 2.5v4'/%3E%3Cpath transform='translate(50 64) rotate(-10) scale(1.3) translate(-12 -12)' d='M8.5 9.5a3.5 3.5 0 1 1 7 0M12 21a6.5 6.5 0 1 1 0-13a6.5 6.5 0 1 1 0 13z'/%3E%3Cpath transform='translate(104 76) rotate(0) scale(1.1) translate(-12 -12)' d='M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0M9.5 12a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0'/%3E%3Cpath transform='translate(18 100) rotate(18) scale(1.15) translate(-12 -12)' d='M3.5 8.5 12 4.5l8.5 4v9L12 21.5l-8.5-4zM3.5 8.5l8.5 4 8.5-4M12 12.5v9'/%3E%3Cpath transform='translate(84 112) rotate(34) scale(1.0) translate(-12 -12)' d='M8 12h8M5 8h3v8H5zM16 8h3v8h-3zM3 10h2v4H3zM19 10h2v4h-2z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 17cqw 17cqw repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(22 20) rotate(-22) scale(1.3) translate(-12 -12)' d='M8 12h8M5 8h3v8H5zM16 8h3v8h-3zM3 10h2v4H3zM19 10h2v4h-2z'/%3E%3Cpath transform='translate(80 26) rotate(12) scale(1.25) translate(-12 -12)' d='M4.5 14a7.5 7.5 0 1 0 15 0a7.5 7.5 0 1 0-15 0M12 10v4l2.5 2M10 2.5h4M12 2.5v4'/%3E%3Cpath transform='translate(50 64) rotate(-10) scale(1.3) translate(-12 -12)' d='M8.5 9.5a3.5 3.5 0 1 1 7 0M12 21a6.5 6.5 0 1 1 0-13a6.5 6.5 0 1 1 0 13z'/%3E%3Cpath transform='translate(104 76) rotate(0) scale(1.1) translate(-12 -12)' d='M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0M9.5 12a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0'/%3E%3Cpath transform='translate(18 100) rotate(18) scale(1.15) translate(-12 -12)' d='M3.5 8.5 12 4.5l8.5 4v9L12 21.5l-8.5-4zM3.5 8.5l8.5 4 8.5-4M12 12.5v9'/%3E%3Cpath transform='translate(84 112) rotate(34) scale(1.0) translate(-12 -12)' d='M8 12h8M5 8h3v8H5zM16 8h3v8h-3zM3 10h2v4H3zM19 10h2v4h-2z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 17cqw 17cqw repeat;
}
.tc-messagerie__day {
  align-self: center;
  margin-bottom: auto;
  padding: 0.35cqw 1.2cqw;
  border: 1px solid var(--line);
  border-radius: 0.8cqw;
  background: var(--surface);
  font-family: var(--mono); font-size: 1.65cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
.tc-messagerie__msg {
  position: relative;
  display: block;
  max-width: 86%;
  padding: 0.8cqw 1.3cqw 0.7cqw;
  border-radius: 1.4cqw;
  background: var(--surface);
  color: var(--text);
  font-size: 2.1cqw;
  line-height: 1.3;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.tc-messagerie__msg.is-in { align-self: flex-start; border-top-left-radius: 0.3cqw; }
.tc-messagerie__msg.is-out { align-self: flex-end; border-top-right-radius: 0.3cqw; background: var(--tc-messagerie-out); }
.tc-messagerie__author {
  display: block;
  margin-bottom: 0.2cqw;
  font-family: var(--mono); font-size: 1.7cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.tc-messagerie__msg.is-out .tc-messagerie__author { color: var(--lime-ink); }
.tc-messagerie__meta {
  float: right;
  display: inline-flex; align-items: center; gap: 0.3cqw;
  margin: 0.5cqw 0 -0.2cqw 1.4cqw;
  font-family: var(--mono); font-size: 1.65cqw; color: var(--text-3);
}
.tc-messagerie__meta svg { width: 2.4cqw; height: 1.6cqw; }

/* saisie */
.tc-messagerie__compose {
  flex: none;
  display: flex; align-items: center; gap: 1cqw;
  padding: 1.2cqw 1.6cqw 1.4cqw;
  border-top: 1px solid var(--line);
}
.tc-messagerie__input {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.9cqw;
  padding: 1cqw 1.3cqw;
  border: 1px solid var(--lime-edge);
  border-radius: 1.3cqw;
  background: var(--surface-2);
  box-shadow: 0 0 0 0.35cqw var(--lime-soft);
  font-size: 2.05cqw; color: var(--text-3);
}
.tc-messagerie__input span { flex: 1; white-space: nowrap; }
.tc-messagerie__input svg { width: 2.3cqw; height: 2.3cqw; color: var(--text-3); }
.tc-messagerie__send {
  display: grid; place-items: center;
  width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw;
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-2);
}
.tc-messagerie__send svg { width: 2.3cqw; height: 2.3cqw; }

/* carte : multisites */
.tc-multisites { position: absolute; inset: 0; container-type: size; display: grid; grid-template-columns: 46% 1fr; font-family: var(--sans); color: var(--text-2); background: var(--surface); }
.tc-multisites small { display: block; font-weight: 500; }

.tc-multisites__side { display: flex; flex-direction: column; gap: 3cqh; padding: 5.5cqh 3.6cqw; background: var(--surface-2); border-right: 1px solid var(--line); min-width: 0; }
.tc-multisites__box { display: flex; align-items: center; gap: 1.8cqw; padding: 2.4cqh 1.8cqw; border: 1px solid var(--lime-edge); border-radius: 1.8cqw; background: var(--surface); box-shadow: 0 0 0 2px var(--lime-soft); }
.tc-multisites__mark { display: grid; place-items: center; flex: none; width: 6.6cqw; height: 6.6cqw; border-radius: 1.5cqw; background: var(--lime); color: var(--on-lime); font-family: var(--mono); font-size: 2.6cqw; font-weight: 800; }
.tc-multisites__name { flex: 1; min-width: 0; font-size: 3.1cqw; font-weight: 700; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-multisites__name small { font-family: var(--mono); font-size: 2.1cqw; color: var(--lime-ink); letter-spacing: -0.01em; }
.tc-multisites__chev, .tc-multisites__check { flex: none; width: 2.8cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-multisites__chev { color: var(--text-3); }

.tc-multisites__menu { display: grid; gap: 0.6cqh; padding: 2cqh 1.6cqw; border: 1px solid var(--line); border-radius: 1.8cqw; background: var(--surface); box-shadow: var(--shadow-1); }
.tc-multisites__cap { padding: 0.6cqh 1.4cqw 1.2cqh; font-family: var(--mono); font-size: 2.1cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.tc-multisites__site { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqh 1.4cqw; border-radius: 1.2cqw; }
.tc-multisites__site.is-on { background: var(--lime-soft); }
.tc-multisites__pin { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--text-3); opacity: 0.55; }
.tc-multisites__site.is-on .tc-multisites__pin { background: var(--lime); opacity: 1; box-shadow: 0 0 0 0.8cqw var(--lime-soft); }
.tc-multisites__site-n { flex: 1; min-width: 0; font-size: 2.8cqw; font-weight: 600; line-height: 1.2; color: var(--text); white-space: nowrap; }
.tc-multisites__site-n small { font-family: var(--mono); font-size: 2.1cqw; color: var(--text-3); }
.tc-multisites__check { color: var(--lime-ink); stroke-width: 2; }

.tc-multisites__nav { display: grid; gap: 2.4cqh; padding: 0 1.6cqw; margin-top: auto; }
.tc-multisites__nav span { height: 1.4cqh; border-radius: 1cqh; background: var(--line); }
.tc-multisites__nav span:nth-child(1) { width: 70%; }
.tc-multisites__nav span:nth-child(2) { width: 52%; }
.tc-multisites__nav span:nth-child(3) { width: 62%; }

.tc-multisites__main { display: flex; flex-direction: column; justify-content: center; gap: 2.8cqh; padding: 5.5cqh 4.2cqw; min-width: 0; }
.tc-multisites__who { display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 3cqh; border-bottom: 1px solid var(--line); }
.tc-multisites__av { position: relative; width: 9.4cqw; height: 9.4cqw; font-size: 3cqw; background: linear-gradient(135deg, var(--pink), var(--indigo)); }
.tc-multisites__id { flex: 1; min-width: 0; line-height: 1.25; }
.tc-multisites__id b { font-size: 3.4cqw; }
.tc-multisites__dot { position: absolute; right: -0.2cqw; bottom: -0.2cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--ok); border: 0.6cqw solid var(--surface); }
.tc-multisites__id small { white-space: nowrap; font-family: var(--mono); font-size: 2.2cqw; color: var(--text-3); }
.tc-multisites__ok { flex: none; padding: 0.8cqh 1.8cqw; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-family: var(--mono); font-size: 2.1cqw; font-weight: 700; }

.tc-multisites__rel { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 2cqw; row-gap: 0.6cqh; align-items: center; padding: 2.4cqh 2.6cqw; border: 1px solid var(--line); border-radius: 1.8cqw; background: var(--surface-2); }
.tc-multisites__k { font-family: var(--mono); font-size: 2.1cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.tc-multisites__v { grid-row: 2; font-size: 3.3cqw; font-weight: 700; color: var(--text); white-space: nowrap; }
.tc-multisites__v small { display: inline; margin-left: 0.4em; font-size: 2.3cqw; color: var(--text-3); }
.tc-multisites__tag { grid-row: 1 / 3; grid-column: 2; padding: 0.8cqh 1.8cqw; border-radius: 99px; background: var(--lime-soft); color: var(--lime-ink); font-family: var(--mono); font-size: 2.1cqw; font-weight: 700; white-space: nowrap; }
.tc-multisites__tag--b { background: var(--violet-bg); color: var(--violet); }
.tc-multisites__foot { font-family: var(--mono); font-size: 2.1cqw; color: var(--lime-ink); }

/* carte : newsletters */
.tc-newsletters {
  position: absolute;
  inset: 0;
  container-type: size;
}
.tc-newsletters > * { font-size: 2.55cqw; }
.tc-newsletters__mail {
  position: absolute;
  left: 4cqw; top: 5cqw; width: 47cqw; bottom: 5cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  padding: 2.6cqw 2.8cqw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2cqw;
  box-shadow: 0 1.5cqw 4cqw -2cqw rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.tc-newsletters__from { display: flex; align-items: center; gap: 1.6cqw; }
.tc-newsletters__logo, .tc-newsletters__app {
  display: grid; place-items: center; flex: none;
  width: 5.2cqw; height: 5.2cqw; border-radius: 1.3cqw;
  background: var(--lime); color: var(--on-lime);
  font-family: var(--mono); font-weight: 800; font-size: 2.8cqw;
}
.tc-newsletters__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tc-newsletters__who b { color: var(--text); font-size: 2.55cqw; }
.tc-newsletters__who small { color: var(--text-3); font-family: var(--mono); font-size: 2.3cqw; }
.tc-newsletters__tag {
  margin-left: auto; padding: 0.4cqw 1.4cqw; border-radius: 99px;
  background: var(--ok-bg); color: var(--ok);
  font-family: var(--mono); font-size: 2.3cqw; font-weight: 700;
}
.tc-newsletters__subject { font-size: 3.1cqw; line-height: 1.15; color: var(--text); letter-spacing: -0.01em; }
.tc-newsletters__img {
  position: relative; flex: 1 1 auto; min-height: 9cqw;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3cqw;
  padding: 1.6cqw 2cqw;
  border-radius: 1.2cqw;
  background:
    repeating-linear-gradient(135deg, rgba(200, 219, 92, 0.16) 0 1.1cqw, transparent 1.1cqw 3.2cqw),
    radial-gradient(circle at 80% 20%, rgba(200, 219, 92, 0.55), transparent 55%),
    linear-gradient(160deg, #3a4150, #1b1e25);
  overflow: hidden;
}
.tc-newsletters__img span { font-family: var(--mono); font-size: 2.3cqw; color: #C8DB5C; letter-spacing: 0.08em; text-transform: uppercase; }
.tc-newsletters__img strong { font-size: 3.2cqw; color: #fff; font-weight: 800; line-height: 1.05; }
.tc-newsletters__txt { margin: 0; font-size: 2.45cqw; line-height: 1.3; color: var(--text-2); }
.tc-newsletters__cta {
  align-self: flex-start; padding: 1cqw 2.4cqw; border-radius: 1cqw;
  background: var(--lime); color: var(--on-lime);
  font-size: 2.45cqw; font-weight: 700;
}

.tc-newsletters__phone {
  position: absolute;
  left: 55cqw; top: 5cqw; width: 28cqw; bottom: 5cqw;
  padding: 1cqw;
  border-radius: 4cqw;
  background: #111317;
  border: 1px solid var(--line);
  box-shadow: 0 1.5cqw 4cqw -2cqw rgba(0, 0, 0, 0.45);
}
.tc-newsletters__lock {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 3.4cqw 0.9cqw 0;
  border-radius: 3cqw;
  background: radial-gradient(circle at 30% 110%, rgba(200, 219, 92, 0.35), transparent 60%), linear-gradient(170deg, #2d3340, #15181e);
  overflow: hidden;
}
.tc-newsletters__lock::before {
  content: ""; position: absolute; top: 1cqw; left: 50%; width: 7cqw; height: 1.6cqw;
  transform: translateX(-50%); border-radius: 99px; background: #0b0c0f;
}
.tc-newsletters__time { font-size: 6.4cqw; font-weight: 300; color: #fff; line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.tc-newsletters__date { margin-top: 0.6cqw; font-size: 2.3cqw; color: rgba(255, 255, 255, 0.75); }
.tc-newsletters__push {
  display: flex; flex-direction: column; gap: 0.5cqw;
  width: 100%; margin-top: 3cqw; padding: 1.3cqw 1.5cqw 1.5cqw;
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.14);
  line-height: 1.2;
}
.tc-newsletters__app { width: 3cqw; height: 3cqw; border-radius: 0.8cqw; font-size: 1.9cqw; }
.tc-newsletters 
.tc-newsletters__rates {
  position: absolute;
  left: 85cqw; right: 2cqw; top: 5cqw; bottom: 5cqw;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4cqw;
}
.tc-newsletters__rate { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.tc-newsletters__ring {
  --c: var(--lime);
  position: relative; display: grid; place-items: center;
  width: 10.5cqw; height: 10.5cqw; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0);
}
.tc-newsletters__ring--app { --c: var(--info); }
.tc-newsletters__ring::before { content: ""; position: absolute; inset: 1.2cqw; border-radius: 50%; background: var(--surface); }
.tc-newsletters__ring b { position: relative; font-family: var(--mono); font-size: 2.5cqw; font-weight: 700; color: var(--text); font-feature-settings: "tnum" 1; }
.tc-newsletters__rate small { display: flex; align-items: center; gap: 0.7cqw; font-family: var(--mono); font-size: 2.3cqw; color: var(--text-3); }
.tc-newsletters__rate small i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--lime); }
.tc-newsletters__rate small i.is-app { background: var(--info); }
.tc-newsletters__pushhd { display: flex; align-items: center; gap: 0.8cqw; font-size: 2.2cqw; color: rgba(255, 255, 255, 0.72); }
.tc-newsletters__pushhd > span:nth-child(2) { flex: 1; white-space: nowrap; }
.tc-newsletters .tc-newsletters__push b { color: #fff; font-size: 2.4cqw; }
.tc-newsletters__push em { font-style: normal; color: rgba(255, 255, 255, 0.82); font-size: 2.3cqw; }
.tc-newsletters__ctl { position: absolute; left: 2.2cqw; right: 2.2cqw; bottom: 2.6cqw; display: flex; justify-content: space-between; }
.tc-newsletters__ctl i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.tc-newsletters__lock::after { content: ""; position: absolute; bottom: 1cqw; left: 50%; width: 8cqw; height: 0.6cqw; transform: translateX(-50%); border-radius: 99px; background: rgba(255, 255, 255, 0.55); }

/* carte : paiements */
/* paiements : tableau de bord financier du mois */
.tc-paiements {
  --tc-paiements-indigo: #3F51B5;
  position: absolute; inset: 0;
  container-type: size;
  background: var(--bg);
}
.tc-paiements__in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 4.2cqh;
  padding: 5cqh 4.5cqw 5cqh;
  color: var(--text-2);
}
.tc-paiements__head { display: flex; align-items: center; gap: 2.4cqw; }
.tc-paiements__title { font-size: 5.6cqh; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.tc-paiements__eyebrow, .tc-paiements__cap { font-family: var(--mono); font-size: 3.6cqh; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tc-paiements__eyebrow span, .tc-paiements__cap span { color: var(--lime-ink); }
.tc-paiements__btn { margin-left: auto; padding: 1.2cqh 2.6cqw; border-radius: 1.6cqh; background: var(--lime); color: var(--on-lime); font-size: 3.6cqh; font-weight: 700; white-space: nowrap; }

.tc-paiements__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: 3cqw; }
.tc-paiements__chart {
  display: flex; flex-direction: column; min-height: 0;
  padding: 2.6cqh 2.6cqw 2cqh;
  border: 1px solid var(--line); border-radius: 3cqh; background: var(--surface);
}
.tc-paiements__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 0.45cqw; margin-top: 6.5cqh; }
.tc-paiements__bars i { flex: 1; min-height: 2px; border-radius: 1px 1px 0 0; background: var(--tc-paiements-indigo); }
.tc-paiements__bars i.soon {
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--tc-paiements-indigo) 44%, var(--surface)) 0 2px,
    var(--surface) 2px 4px);
  border: 1px solid color-mix(in oklab, var(--tc-paiements-indigo) 40%, var(--surface));
  border-bottom: none;
}
.tc-paiements__today { position: relative; flex: 0 0 1px; align-self: stretch; background: var(--lime-ink); }
.tc-paiements__today::after {
  content: "auj."; position: absolute; top: -4.4cqh; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 3.2cqh; font-weight: 700; color: var(--lime-ink); white-space: nowrap;
}
.tc-paiements__x { display: flex; justify-content: space-between; margin-top: 1cqh; padding-top: 0.8cqh; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 3.1cqh; color: var(--text-3); }

.tc-paiements__sum {
  display: flex; flex-direction: column; justify-content: center; gap: 1.6cqh;
  padding: 2.6cqh 2.8cqw;
  border: 1px solid var(--line); border-radius: 3cqh; background: var(--surface-2);
}
.tc-paiements__tot { display: flex; flex-direction: column; gap: 0.6cqh; padding-bottom: 1.8cqh; border-bottom: 1px solid var(--line); }
.tc-paiements__tot span { font-family: var(--mono); font-size: 3.1cqh; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.tc-paiements__tot b { font-size: 7.4cqh; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; }
.tc-paiements__line { display: flex; align-items: center; gap: 1.4cqw; font-size: 3.6cqh; color: var(--text-2); white-space: nowrap; }
.tc-paiements__line i { width: 2.6cqh; height: 2.6cqh; border-radius: 50%; flex: none; }
.tc-paiements__line i.ok { background: var(--ok); }
.tc-paiements__line i.ko { background: var(--danger); }
.tc-paiements__line i.soon { background: var(--tc-paiements-indigo); }
.tc-paiements__line b { margin-left: auto; font-family: var(--mono); font-size: 3.5cqh; color: var(--text); }

.tc-paiements__list { display: grid; border: 1px solid var(--line); border-radius: 3cqh; background: var(--surface); overflow: hidden; }
.tc-paiements__row {
  display: grid; grid-template-columns: 12% 1fr auto 22%; align-items: center; gap: 2.4cqw;
  padding: 1.35cqh 2.8cqw; font-size: 3.7cqh;
}
.tc-paiements__row + .tc-paiements__row { border-top: 1px solid var(--line); }
.tc-paiements__d { font-family: var(--mono); font-size: 3.3cqh; color: var(--text-3); }
.tc-paiements__who { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-paiements__row b { font-family: var(--mono); font-size: 3.5cqh; text-align: right; }
.tc-paiements__st { display: inline-flex; align-items: center; gap: 1.2cqw; color: var(--ok); font-weight: 600; white-space: nowrap; }
.tc-paiements__st::before { content: ""; width: 2.4cqh; height: 2.4cqh; border-radius: 50%; background: currentColor; flex: none; }
.tc-paiements__st--wait { color: var(--warn); }
.tc-paiements__st--fail { color: var(--danger); }

/* carte : partenaires */
/* partenaires : l'écran Partenaires externes (lignes à plaque) + ce qui arrive dans le planning */
.tc-partenaires {
  position: absolute; inset: 0;
  container-type: inline-size;
}
.tc-partenaires__in {
  height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2cqw;
  padding: 3.6cqw 4.5cqw;
}
.tc-partenaires .ic { width: 1em; height: 1em; }
.tc-partenaires__head { display: flex; align-items: center; justify-content: space-between; }
.tc-partenaires__count {
  font-family: var(--mono); font-size: 2.1cqw; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.tc-partenaires__new {
  display: inline-flex; align-items: center; gap: 0.8cqw;
  padding: 0.9cqw 2cqw; border-radius: 1.6cqw;
  background: var(--lime); color: var(--on-lime);
  font-size: 2.3cqw; font-weight: 700;
}

.tc-partenaires__row {
  --tone: var(--ok);
  display: grid; grid-template-columns: 15cqw minmax(0, 1fr);
  height: 13.6cqw; flex: none;
  border: 1px solid var(--line); border-radius: 2.4cqw; overflow: hidden;
  background: var(--surface); color: var(--text);
}
.tc-partenaires__plate {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.6cqw 0 1.8cqw 2.2cqw;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--tone) 16%, transparent) 0 1px, transparent 1px 1.9cqw),
    color-mix(in oklab, var(--tone) 12%, var(--surface));
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  color: var(--tone);
}
.tc-partenaires__plate > span { font-family: var(--mono); font-size: 2.1cqw; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.tc-partenaires__plate i {
  display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw;
  border-radius: 1.8cqw; font-size: 3.2cqw;
  border: 1px solid color-mix(in oklab, var(--tone) 45%, transparent);
  background: color-mix(in oklab, var(--tone) 10%, var(--surface));
}
.tc-partenaires__row--cp .tc-partenaires__plate {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 1.9cqw), #17181d;
  color: #ECECF0;
}
.tc-partenaires__row--cp .tc-partenaires__plate i { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }

.tc-partenaires__body { display: flex; flex-direction: column; justify-content: center; gap: 1.3cqw; min-width: 0; padding: 0 2.5cqw 0 1cqw; }
.tc-partenaires__top { display: flex; align-items: center; gap: 1.8cqw; min-width: 0; }
.tc-partenaires .tc-partenaires__name {
  font-size: 3.3cqw; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text); white-space: nowrap;
}
.tc-partenaires__tag {
  display: inline-flex; align-items: center; gap: 0.7cqw;
  padding: 0.6cqw 1.4cqw; border-radius: 1.2cqw;
  font-family: var(--mono); font-size: 1.95cqw; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.tc-partenaires__tag--ok { background: var(--ok-bg); color: var(--ok); }
.tc-partenaires__tag--cp { background: #17181d; color: #ECECF0; }
.tc-partenaires__stats {
  font-family: var(--mono); font-size: 2.3cqw; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-feature-settings: "tnum" 1;
}
.tc-partenaires .tc-partenaires__stats b { color: var(--text-2); font-weight: 700; }

.tc-partenaires__feed {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw 2.2cqw;
  padding-top: 1.8cqw; border-top: 1px dashed var(--line);
}
.tc-partenaires__flabel {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 1cqw;
  font-family: var(--mono); font-size: 1.95cqw; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.tc-partenaires__flabel .ic { color: var(--lime-ink); }
.tc-partenaires__ev {
  display: flex; align-items: center; gap: 1.6cqw; min-width: 0;
  padding: 1.4cqw 1.8cqw; border-radius: 2cqw;
  background: var(--surface-2);
  border-left: 0.8cqw solid #3F51B5;
}
.tc-partenaires__src {
  display: grid; place-items: center; flex: none;
  width: 5.4cqw; height: 5.4cqw; border-radius: 50%;
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700;
}
.tc-partenaires__src--wp { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok) 40%, transparent); }
.tc-partenaires__src--cp { background: #17181d; color: #ECECF0; }
.tc-partenaires__evtxt { display: grid; min-width: 0; line-height: 1.2; }
.tc-partenaires .tc-partenaires__evtxt b { font-size: 2.5cqw; color: var(--text); white-space: nowrap; }
.tc-partenaires__evtxt small { font-family: var(--mono); font-size: 1.9cqw; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-partenaires__ok {
  display: grid; place-items: center; flex: none; margin-left: auto;
  width: 4.4cqw; height: 4.4cqw; border-radius: 50%; font-size: 2.6cqw;
  background: var(--ok); color: var(--surface);
}
.tc-partenaires__slot {
  flex: none; margin-left: auto;
  font-family: var(--mono); font-size: 2.1cqw; font-weight: 700; color: var(--text-2);
}

/* carte : planning */
/* Planning : la semaine entière du calendrier, 7 h → 21 h, séances posées
   à leur heure et à leur durée (grille au quart d'heure), liseré de
   catégorie, jauge de remplissage, trait « maintenant » dans la colonne
   du jour et fiche de la séance sélectionnée.
   Tout est en cqw : même composition de 1440 à 390 px. */
.tour-card__screen:has(> .tc-planning) { container-type: inline-size; }
.tc-planning {
  position: absolute;
  inset: 2.4cqw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 2cqw;
  overflow: hidden;
  background: var(--surface);
  font-size: 1.9cqw;
  line-height: 1.2;
  color: var(--text-2);
  --tc-axis: 6.6cqw;
}

/* en-tête des jours */
.tc-planning__head {
  display: grid;
  grid-template-columns: var(--tc-axis) repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tc-planning__day {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  padding: 1.2cqw 0;
  border-left: 1px solid var(--line-soft);
  color: var(--text-3);
  white-space: nowrap;
}
.tc-planning__day b {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
}
.tc-planning__day--today { background: var(--lime-soft); color: var(--text-2); }
.tc-planning__day--today b {
  padding: 0.1cqw 0.9cqw;
  border-radius: 1cqw;
  background: var(--lime);
  color: var(--on-lime);
}

/* corps : 14 heures x 4 quarts d'heure */
.tc-planning__body {
  position: relative;
  display: grid;
  grid-template-columns: var(--tc-axis) repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(56, minmax(0, 1fr));
  min-height: 0;
  background: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px calc(100% / 14));
}
.tc-planning__hour {
  grid-column: 1;
  grid-row-end: span 4;
  padding: 0.3cqw 0.8cqw 0 0;
  font-family: var(--mono);
  font-size: 1.75cqw;
  line-height: 1;
  text-align: right;
  color: var(--text-3);
}
.tc-planning__col {
  grid-row: 1 / -1;
  border-left: 1px solid var(--line-soft);
}
.tc-planning__col--today { background: var(--lime-soft); }

/* séance */
.tc-planning__ev {
  --c: #3F51B5;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  margin: 0.25cqw 0.35cqw 0.25cqw 0.3cqw;
  padding: 0.35cqw 0.5cqw 0 0.6cqw;
  overflow: hidden;
  border-left: 0.75cqw solid var(--c);
  border-radius: 0.9cqw;
  background: color-mix(in srgb, var(--c) 17%, var(--surface));
}
.tc-planning__ev--hyrox { --c: #0ea5e9; }
.tc-planning__ev--halt  { --c: #8b5cf6; }
.tc-planning__ev--mob   { --c: #7A8B99; }
.tc-planning__ev--open  { --c: #A8A29E; }
.tc-planning__ev b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.8cqw;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.tc-planning__ev > span {
  display: flex;
  justify-content: space-between;
  gap: 0.5cqw;
  margin-top: 0.25cqw;
  font-family: var(--mono);
  font-size: 1.8cqw;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-planning__ev em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-2);
}
.tc-planning__ev > span em { flex: none; color: var(--text); }
.tc-planning__ev time { min-width: 0; overflow: hidden; }
/* jauge de remplissage en pied de séance */
.tc-planning__ev::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--f, 0%);
  height: 0.55cqw;
  background: var(--c);
  opacity: 0.85;
}

/* complète : compteur et jauge au rouge, sur la même ligne que la catégorie */
.tc-planning__ev--full { flex-direction: row; justify-content: space-between; gap: 0.4cqw; }
.tc-planning__ev--full em { color: var(--danger); font-size: 1.8cqw; }
.tc-planning__ev--full::after { background: var(--danger); opacity: 1; }
.tc-planning__ev--full.tc-planning__ev--tall { flex-direction: column; justify-content: flex-start; }
.tc-planning__ev--full.tc-planning__ev--tall > span em { color: var(--danger); }

/* annulée : hachures et catégorie barrée */
.tc-planning__ev--cancel {
  border-left-color: var(--danger);
  background:
    repeating-linear-gradient(135deg, var(--danger-bg) 0 0.8cqw, transparent 0.8cqw 1.6cqw),
    var(--surface);
  flex-direction: row;
  justify-content: space-between;
  gap: 0.4cqw;
}
.tc-planning__ev--cancel b { color: var(--danger); text-decoration: line-through; }
.tc-planning__ev--cancel em { display: none; }

/* séance ouverte dans la fiche */
.tc-planning__ev--sel { box-shadow: 0 0 0 1.5px var(--lime); }

/* maintenant : trait dans la colonne du jour, heure dans l'axe */
.tc-planning__now,
.tc-planning__nowtag {
  position: relative;
  z-index: 2;
  grid-row: 1 / -1;
  pointer-events: none;
}
.tc-planning__now { grid-column: 4; }
.tc-planning__now::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--t) * 100%);
  height: 2px;
  margin-top: -1px;
  background: var(--lime);
}
.tc-planning__now::after {
  content: "";
  position: absolute;
  left: -0.9cqw;
  top: calc(var(--t) * 100%);
  width: 1.8cqw;
  height: 1.8cqw;
  margin-top: -0.9cqw;
  border-radius: 50%;
  background: var(--lime);
}
.tc-planning__nowtag { grid-column: 1; }
.tc-planning__nowtag i {
  position: absolute;
  right: 0.3cqw;
  top: calc(var(--t) * 100%);
  transform: translateY(-50%);
  padding: 0.25cqw 0.4cqw;
  border-radius: 0.7cqw;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  font-size: 1.6cqw;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* fiche de la séance sélectionnée */
.tc-planning__pop {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1cqw;
  margin: 0 1.2cqw 0 1.8cqw;
  padding: 1.3cqw 1.5cqw;
  border: 1px solid var(--line);
  border-radius: 1.6cqw;
  background: var(--surface);
  box-shadow: 0 1.6cqw 4cqw -1.2cqw rgba(0, 0, 0, 0.35);
}
.tc-planning__pop::before {
  content: "";
  position: absolute;
  left: -0.9cqw;
  bottom: 9%;
  width: 1.6cqw;
  height: 1.6cqw;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  transform: rotate(45deg);
}
.tc-planning__pop-when {
  font-family: var(--mono);
  font-size: 1.75cqw;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-planning__pop-title {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  color: var(--text-2);
  white-space: nowrap;
}
.tc-planning__pop-title b {
  padding-left: 1cqw;
  border-left: 0.75cqw solid #3F51B5;
  font-family: var(--mono);
  font-size: 2.3cqw;
  color: var(--text);
}
.tc-planning__pop-fill {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.tc-planning__pop-fill i {
  position: relative;
  flex: 1;
  height: 1cqw;
  border-radius: 1cqw;
  background: var(--surface-2);
  overflow: hidden;
}
.tc-planning__pop-fill i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--f);
  border-radius: inherit;
  background: var(--lime);
}
.tc-planning__pop-fill b { font-family: var(--mono); font-size: 1.8cqw; }
.tc-planning__pop-who { display: flex; align-items: center; }
.tc-planning__pop-who .tc-av {
  width: 4.6cqw;
  height: 4.6cqw;
  margin-right: -0.7cqw;
  font-size: 1.75cqw;
  box-shadow: 0 0 0 1px var(--surface);
}
.tc-planning__pop-who .tc-av:nth-child(2) { background: linear-gradient(135deg, #3F51B5, #2c3a8c); }
.tc-planning__pop-who .tc-av:nth-child(3) { background: linear-gradient(135deg, #0e8fc9, #0b6d99); }
.tc-planning__pop-who .tc-av:nth-child(4) { background: linear-gradient(135deg, #8b5cf6, #6d3fd6); }
.tc-planning__pop-who em {
  margin-left: 1.8cqw;
  font-style: normal;
  font-family: var(--mono);
  font-size: 1.75cqw;
  color: var(--text-3);
}

/* carte : sms */
/* SMS : bandeau « Vos SMS » et ses compteurs, SMS reçus côté adhérent,
   journal des envois avec leur source et l'accusé de remise.
   Tout est en cqw : même composition de 1440 à 390 px. */
.tour-card__screen:has(> .tc-sms) { container-type: inline-size; }
.tc-sms {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 1.8cqw;
  padding: 2.4cqw;
  font-size: 2cqw; line-height: 1.25; color: var(--text-2);
}
.tc-sms__hero {
  position: relative; overflow: hidden; flex: none;
  display: flex; align-items: center; gap: 1.6cqw;
  height: 9.6cqw; padding: 0 15cqw 0 2.6cqw;
  border: 1px solid var(--line); border-radius: 2cqw;
  background: linear-gradient(110deg, var(--lime-soft), var(--surface) 60%);
}
.tc-sms__hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--scan) 3px 4px); }
.tc-sms__wedge { position: absolute; top: -2cqw; right: -4cqw; width: 17cqw; height: 15cqw; background: var(--lime); opacity: 0.85; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.tc-sms__hero-t { position: relative; display: flex; flex-direction: column; gap: 0.5cqw; margin-right: auto; min-width: 0; }
.tc-sms__eyebrow { display: flex; align-items: center; gap: 0.8cqw; font-family: var(--mono); font-size: 1.75cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime-ink); white-space: nowrap; }
.tc-sms__eyebrow i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--ok); }
.tc-sms__title { font-size: 3.5cqw; font-weight: 800; text-transform: uppercase; color: var(--text); white-space: nowrap; line-height: 1; }
.tc-sms__title span { color: var(--lime-ink); }
.tc-sms__count { position: relative; display: flex; flex-direction: column; gap: 0.3cqw; padding: 1cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1.4cqw; background: var(--surface); }
.tc-sms__count small { font-family: var(--mono); font-size: 1.4cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tc-sms__count b { font-family: var(--mono); font-size: 2.6cqw; color: var(--text); white-space: nowrap; }
.tc-sms__count em { font-style: normal; font-size: 1.7cqw; color: var(--text-3); font-weight: 500; }

.tc-sms__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 40% 1fr; gap: 1.8cqw; }

/* côté adhérent : les SMS tels qu'il les reçoit */
.tc-sms__phone {
  display: flex; flex-direction: column; gap: 1.3cqw; min-height: 0; overflow: hidden;
  padding: 1.8cqw; border: 1px solid var(--line); border-radius: 2cqw; background: var(--surface-2);
}
.tc-sms__sender { display: flex; flex-direction: column; align-items: center; gap: 0.2cqw; padding-bottom: 1cqw; border-bottom: 1px solid var(--line-soft); }
.tc-sms__sender b { font-size: 2.2cqw; color: var(--text); letter-spacing: 0.04em; }
.tc-sms__sender small { font-family: var(--mono); font-size: 1.4cqw; color: var(--text-3); }
.tc-sms__bubble { align-self: flex-start; max-width: 94%; padding: 1.1cqw 1.4cqw; border-radius: 1.8cqw 1.8cqw 1.8cqw 0.5cqw; background: var(--surface); border: 1px solid var(--line); font-size: 1.75cqw; line-height: 1.4; color: var(--text); }
.tc-sms__bubble time { display: block; margin-top: 0.4cqw; font-family: var(--mono); font-size: 1.3cqw; color: var(--text-3); text-align: right; }

/* journal */
.tc-sms__log { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 2cqw; background: var(--surface); }
.tc-sms__cap { padding: 1.4cqw 1.8cqw 1cqw; font-family: var(--mono); font-size: 1.5cqw; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.tc-sms__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.2cqw; padding: 1.25cqw 1.8cqw; border-top: 1px solid var(--line-soft); }
.tc-sms__row b { font-size: 1.9cqw; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sms__src { padding: 0.3cqw 0.9cqw; border-radius: 0.8cqw; background: var(--surface-2); font-size: 1.6cqw; font-weight: 600; white-space: nowrap; }
.tc-sms__src::before { content: "⚡"; margin-right: 0.5cqw; font-size: 1.3cqw; }
.tc-sms__src.is-hand::before { content: "✎"; }
.tc-sms__ok { padding: 0.3cqw 0.8cqw; border-radius: 0.7cqw; background: var(--ok-bg); color: var(--ok); font-family: var(--mono); font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tc-sms__gw { margin-top: auto; display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 1.8cqw; border-top: 1px solid var(--line-soft); background: var(--lime-soft); font-size: 1.6cqw; color: var(--text-2); }
.tc-sms__gw i { width: 2.8cqw; height: 2.8cqw; display: grid; place-items: center; border-radius: 0.7cqw; background: var(--lime); color: var(--on-lime); font-style: normal; font-weight: 800; font-size: 1.6cqw; }

/* carte : stats */
/* Statistiques : indicateurs clés du module Stats (CA, clients actifs,
   rétention) avec tendance, CA d'une année sur l'autre (N / N-1) et
   heatmap des créneaux aux 5 paliers du logiciel.
   Tout est en cqw : même composition de 1440 à 390 px. */
.tour-card__screen:has(> .tc-stats) { container-type: inline-size; }
.tc-stats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
  padding: 2.8cqw 3.2cqw;
  font-size: 2.3cqw;
  line-height: 1.2;
  color: var(--text-2);
  background: var(--bg);
}

/* en-tête : titre, mois, choix de période */
.tc-stats__head { flex: none; display: flex; align-items: center; gap: 2cqw; }
.tc-stats__title { font-size: 3.4cqw; font-weight: 800; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.tc-stats__eyebrow,
.tc-stats__cap > span {
  font-family: var(--mono);
  font-size: 2cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-stats__eyebrow span,
.tc-stats__cap > span span { color: var(--lime-ink); }
.tc-stats__periods {
  margin-left: auto;
  display: flex;
  padding: 0.5cqw;
  border: 1px solid var(--line);
  border-radius: 1.4cqw;
  background: var(--surface);
}
.tc-stats__periods i {
  padding: 0.6cqw 1.4cqw;
  border-radius: 1cqw;
  font-style: normal;
  font-family: var(--mono);
  font-size: 2cqw;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-stats__periods i.is-on { background: var(--lime); color: var(--on-lime); font-weight: 700; }

/* trois indicateurs avec tendance et courbe de fond */
.tc-stats__kpis { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw; }
.tc-stats__kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  padding: 1.5cqw 1.8cqw 1.7cqw;
  border: 1px solid var(--line);
  border-radius: 1.8cqw;
  background: var(--surface);
}
.tc-stats__lab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  font-size: 2cqw;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-stats__lab em {
  padding: 0.2cqw 0.9cqw;
  border-radius: 1cqw;
  font-style: normal;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2cqw;
  color: var(--ok);
  background: color-mix(in oklab, var(--ok) 14%, transparent);
}
.tc-stats__lab em::before { content: "\2197\00a0"; }
.tc-stats__kpi b {
  position: relative;
  font-size: 4.3cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.tc-stats__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 4.6cqw;
  overflow: visible;
}
.tc-stats__spark polyline {
  fill: none;
  stroke: var(--lime-edge);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* bas : courbe N / N-1 et heatmap */
.tc-stats__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.42fr 1fr; gap: 1.8cqw; }
.tc-stats__card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.6cqw 2cqw 1.5cqw;
  border: 1px solid var(--line);
  border-radius: 1.8cqw;
  background: var(--surface);
}
.tc-stats__cap { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.tc-stats__cap em { font-style: normal; font-size: 1.95cqw; color: var(--text-3); white-space: nowrap; }
.tc-stats__cap em b { font-family: var(--mono); font-size: 2.2cqw; color: var(--ok); }
.tc-stats__heat .tc-stats__cap em b { color: var(--text); }

.tc-stats__legend { flex: none; display: flex; gap: 2cqw; margin-top: 0.8cqw; font-family: var(--mono); font-size: 2cqw; color: var(--text-3); }
.tc-stats__legend span { display: inline-flex; align-items: center; gap: 0.8cqw; }
.tc-stats__legend span::before { content: ""; width: 2.6cqw; height: 0; border-top: 0.45cqw solid var(--lime); }
.tc-stats__legend .is-n { color: var(--text); }
.tc-stats__legend .is-n1::before { border-top: 0.3cqw dashed var(--text-3); }

.tc-stats__plot { position: relative; flex: 1; min-height: 0; margin: 1.2cqw 0 0.6cqw; }
.tc-stats__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-stats__grid { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tc-stats__area { fill: var(--lime-soft); }
.tc-stats__n,
.tc-stats__n1 { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tc-stats__n { stroke: var(--lime); stroke-width: 2.2; }
.tc-stats__n1 { stroke: var(--text-3); stroke-width: 1.4; stroke-dasharray: 3 3; }
.tc-stats__dot {
  position: absolute;
  width: 2cqw;
  height: 2cqw;
  margin: -0.95cqw 0 0 -0.95cqw;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0.6cqw var(--surface), 0 0 0 0.9cqw var(--lime-edge);
}
.tc-stats__tag {
  position: absolute;
  transform: translate(calc(-100% - 2cqw), -50%);
  padding: 0.35cqw 0.9cqw;
  border-radius: 0.9cqw;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2cqw;
  white-space: nowrap;
}
.tc-stats__x {
  flex: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0 -2.3%;
  padding-top: 0.6cqw;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 2cqw;
  text-align: center;
  color: var(--text-3);
}
.tc-stats__x .is-on { color: var(--lime-ink); font-weight: 700; }

/* heatmap : paliers du logiciel (< 30 %, 60 %, 85 %, 100 %, > 100 %) */
.tc-stats__heat { --l1: color-mix(in oklab, var(--danger) 30%, transparent);
  --l2: color-mix(in oklab, var(--warn) 50%, transparent);
  --l3: color-mix(in oklab, var(--ok) 50%, transparent);
  --l4: var(--ok);
  --l5: linear-gradient(135deg, var(--ok), var(--info)); }
.tc-stats__hm {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 6.6cqw repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(7, minmax(0, 1fr));
  gap: 0.45cqw;
  margin-top: 1cqw;
}
.tc-stats__d { font-family: var(--mono); font-size: 2cqw; text-align: center; color: var(--text-3); }
.tc-stats__hr {
  align-self: center;
  font-family: var(--mono);
  font-size: 2cqw;
  letter-spacing: -0.03em;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-stats__hm i,
.tc-stats__scale i { border-radius: 0.5cqw; }
.tc-stats__hm i.l0 { background: var(--surface-2); }
.tc-stats__hm .l1, .tc-stats__scale .l1 { background: var(--l1); }
.tc-stats__hm .l2, .tc-stats__scale .l2 { background: var(--l2); }
.tc-stats__hm .l3, .tc-stats__scale .l3 { background: var(--l3); }
.tc-stats__hm .l4, .tc-stats__scale .l4 { background: var(--l4); }
.tc-stats__hm .l5, .tc-stats__scale .l5 { background: var(--l5); }
.tc-stats__hm i.is-sel { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--text); }
.tc-stats__scale {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  margin-top: 1.1cqw;
  font-family: var(--mono);
  font-size: 2cqw;
  color: var(--text-3);
  white-space: nowrap;
}
.tc-stats__scale i { flex: 1; height: 1.4cqw; }
.tc-stats__scale span:first-child { margin-right: 0.4cqw; }
.tc-stats__scale span:last-child { margin-left: 0.4cqw; }

/* carte : tv */
/* Wodz TV : un écran fixé au mur de la salle, qui affiche la vraie vue TV.
   L'écran reste sombre dans les deux thèmes (c'est une dalle allumée) ;
   seul le décor autour suit le thème. Tailles en cqw de la carte. */
.tc-tv {
  --tv-bg: #0b0b0d;
  --tv-text: #eaeaea;
  --tv-accent: #DEF643;
  --tv-run: #a2faa1;
  --tv-hl: #fbf585;
  --tv-wait: #f5a524;
  position: absolute;
  inset: 0;
  container-type: inline-size;
  overflow: hidden;
  font-family: Arial, 'Helvetica Neue', sans-serif;
}
.tc-tv__wall {
  position: absolute;
  inset: 0 0 12% 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, color-mix(in oklab, var(--lime) 10%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5cqw - 1px), color-mix(in oklab, var(--line) 70%, transparent) calc(12.5cqw - 1px) 12.5cqw),
    color-mix(in oklab, var(--surface-2) 70%, var(--bg));
}
.tc-tv__stripe {
  position: absolute;
  left: 0;
  right: 0;
  top: 37%;
  height: 2.2cqw;
  background: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow: 0 2.8cqw 0 -0.6cqw color-mix(in oklab, var(--lime) 25%, transparent);
}
.tc-tv__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 12%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20cqw - 1px), color-mix(in oklab, var(--line) 80%, transparent) calc(20cqw - 1px) 20cqw),
    color-mix(in oklab, var(--surface) 60%, var(--bg));
  border-top: 1px solid var(--line);
}
/* deux kettlebells posées au pied du mur */
.tc-tv__kb {
  position: absolute;
  right: 7cqw;
  bottom: 2.2cqw;
  width: 4.6cqw;
  height: 4.2cqw;
  border-radius: 50% 50% 42% 42%;
  background: color-mix(in oklab, var(--text) 70%, var(--bg));
}
.tc-tv__kb::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -2.2cqw;
  height: 2.8cqw;
  border: 0.8cqw solid color-mix(in oklab, var(--text) 70%, var(--bg));
  border-bottom: 0;
  border-radius: 1.6cqw 1.6cqw 0 0;
}
.tc-tv__kb--sm {
  right: 13cqw;
  width: 3.6cqw;
  height: 3.3cqw;
  background: var(--lime);
}
.tc-tv__kb--sm::before {
  top: -1.8cqw;
  height: 2.3cqw;
  border-width: 0.65cqw;
  border-color: var(--lime);
}

/* le téléviseur : cadre fin noir, fixé au mur (ombre portée) */
.tc-tv__set {
  position: absolute;
  left: 5.5cqw;
  top: 3.2cqw;
  width: 89cqw;
  aspect-ratio: 16 / 9;
  padding: 0.9cqw;
  border-radius: 1.2cqw;
  background: linear-gradient(180deg, #1c1c21, #08080a);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2.4cqw 5cqw -1.6cqw rgba(0, 0, 0, 0.55);
}
.tc-tv__scr {
  position: relative;
  height: 100%;
  border-radius: 0.5cqw;
  background: var(--tv-bg);
  color: var(--tv-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tc-tv__scr::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.05), transparent 36%);
}
.tc-tv__dig {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  transform: skewX(-9deg);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
}

.tc-tv__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.6cqw 2.2cqw 0.4cqw;
}
.tc-tv__logo {
  justify-self: start;
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16161a;
  box-shadow: 0 0 0 0.3cqw #eaeaea;
  color: var(--tv-accent);
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 900;
  font-size: 2cqw;
}
.tc-tv__clock {
  display: flex;
  align-items: baseline;
  gap: 0.3cqw;
  color: var(--tv-run);
  line-height: 1;
}
.tc-tv__clock .tc-tv__dig:first-child { font-size: 8.4cqw; }
.tc-tv__ms { font-size: 3.4cqw; }
.tc-tv__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.tc-tv__pause {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  border: 0.4cqw solid var(--tv-accent);
  display: grid;
  place-items: center;
}
.tc-tv__pause::before {
  content: "";
  width: 1.3cqw;
  height: 1.7cqw;
  border-left: 0.45cqw solid var(--tv-accent);
  border-right: 0.45cqw solid var(--tv-accent);
}
.tc-tv__w {
  width: 4.6cqw;
  height: 3cqw;
  background: var(--tv-accent);
  clip-path: polygon(0 0, 22% 0, 36% 58%, 50% 0, 64% 0, 78% 58%, 92% 0, 100% 0, 100% 18%, 86% 100%, 70% 100%, 57% 45%, 43% 45%, 30% 100%, 14% 100%, 0 18%);
}

.tc-tv__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25cqw;
  gap: 1.4cqw;
  padding: 0.6cqw 1.8cqw 1.6cqw 2.2cqw;
}
.tc-tv__train { min-width: 0; }
.tc-tv__title {
  display: flex;
  gap: 1.8cqw;
  margin-bottom: 1.1cqw;
  font-family: 'Inter', 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 3.6cqw;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.tc-tv__ph {
  display: flex;
  gap: 1.8cqw;
  margin-bottom: 1.6cqw;
  font-family: 'Inter', 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.1cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-tv__ph span { padding: 0 0.3cqw 0.5cqw; border-bottom: 0.25cqw solid transparent; }
.tc-tv__ph .is-on { color: var(--tv-accent); border-bottom-color: var(--tv-accent); }
.tc-tv__lv {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.85fr;
  gap: 1.2cqw;
  font-size: 2.2cqw;
  line-height: 1.35;
  white-space: nowrap;
}
.tc-tv__lv > div { min-width: 0; }
.tc-tv__lt {
  display: block;
  color: var(--tv-hl);
  font-size: 2.3cqw;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.tc-tv__lf {
  display: block;
  margin-bottom: 0.5cqw;
  font-size: 1.9cqw;
  text-transform: uppercase;
  opacity: 0.75;
}

.tc-tv__list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 0.2cqw solid var(--tv-text);
  padding-left: 0.9cqw;
  overflow: hidden;
}
.tc-tv__modes {
  display: flex;
  gap: 1.2cqw;
  font-family: 'Inter', 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.9cqw;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tc-tv__modes span { padding-bottom: 0.4cqw; }
.tc-tv__modes .is-on { border-bottom: 0.22cqw solid var(--tv-accent); }
.tc-tv__sess {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  padding: 0.7cqw 0 0.4cqw;
  font-size: 2.2cqw;
}
.tc-tv__sess::before,
.tc-tv__sess::after {
  content: "";
  border-top: 0.6cqw solid transparent;
  border-bottom: 0.6cqw solid transparent;
}
.tc-tv__sess::before { border-right: 0.7cqw solid currentColor; }
.tc-tv__sess::after { border-left: 0.7cqw solid currentColor; }
.tc-tv__row {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.55cqw 0.3cqw;
  border-bottom: 0.15cqw solid rgba(234, 234, 234, 0.4);
  font-weight: 700;
  font-size: 2.2cqw;
  white-space: nowrap;
}
.tc-tv__row i {
  flex: none;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #9a9aa2 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, #9a9aa2 0 42%, transparent 43%),
    #d7d7dc;
}
.tc-tv__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-tv__row--noshow { background: rgba(251, 117, 117, 0.3); opacity: 0.55; }
.tc-tv__row--wait { color: var(--tv-wait); }
.tc-tv__org {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.3cqw;
  height: 2.3cqw;
  padding: 0 0.4cqw;
  border-radius: 0.4cqw;
  font-style: normal;
  font-size: 1.6cqw;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.tc-tv__org--new { color: var(--tv-accent); box-shadow: inset 0 0 0 0.18cqw var(--tv-accent); }
.tc-tv__org--wp { background: #c8f5d8; color: #0a7b3e; }
.tc-tv__org--drop { color: var(--tv-text); box-shadow: inset 0 0 0 0.14cqw var(--tv-text); opacity: 0.8; text-transform: uppercase; }

/* carte : workflows */
/* Canevas du designer de workflows : chaîne d'étapes reliées + menu d'ajout ouvert.
   Tout est dimensionné en cqw (largeur de la miniature) : le rendu est le même à toutes les tailles. */
.tc-workflows { position: absolute; inset: 0; container-type: size; }
.tc-workflows__cv {
  position: absolute; inset: 0;
  background-color: color-mix(in oklab, var(--surface) 40%, var(--bg));
  /* trame discrète : on devine le canevas sans qu'elle concurrence les étapes */
  background-image: radial-gradient(circle, color-mix(in oklab, var(--text-3) 16%, transparent) 0.22cqw, transparent 0.26cqw);
  background-size: 4.4cqw 4.4cqw;
  background-position: 1.8cqw 1.8cqw;
}
.tc-workflows .ic { width: 1em; height: 1em; }

/* colonne des étapes */
.tc-workflows__flow {
  position: absolute; left: 5.5cqw; top: 2.6cqw; width: 52cqw;
  display: flex; flex-direction: column; align-items: stretch;
}
.tc-workflows__flow::before {
  content: ""; position: absolute; left: 50%; top: 4cqw; bottom: 2cqw;
  border-left: 0.3cqw solid var(--line);
}
.tc-workflows__link { height: 1.5cqw; }
.tc-workflows__link--end { height: 1.2cqw; }

/* déclencheur lime */
.tc-workflows__trig {
  position: relative;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 1cqw 1.8cqw;
  border-radius: 1.8cqw;
  background: linear-gradient(100deg, var(--lime), color-mix(in oklab, var(--lime) 72%, #7aa300));
  color: var(--on-lime);
  box-shadow: 0 1cqw 2.4cqw -1.2cqw color-mix(in oklab, var(--lime) 60%, transparent);
}
.tc-workflows__trig-ic {
  display: grid; place-items: center; flex: none;
  width: 5.2cqw; height: 5.2cqw; border-radius: 1.3cqw;
  background: rgba(255, 255, 255, 0.5);
  font-size: 2.8cqw;
}
.tc-workflows__trig b {
  display: block;
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; opacity: 0.78;
}
.tc-workflows__trig span span { display: block; font-size: 2.6cqw; font-weight: 700; line-height: 1.25; white-space: nowrap; }

/* cartes d'étape : liseré coloré + numéro posé dessus */
.tc-workflows__step {
  position: relative;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 0.85cqw 1.6cqw 0.85cqw 2.4cqw;
  border: 1px solid var(--line);
  border-left: 0.8cqw solid var(--info);
  border-radius: 1.6cqw;
  background: var(--surface);
  box-shadow: 0 0.8cqw 2cqw -1.4cqw rgba(0, 0, 0, 0.35);
}
.tc-workflows__n {
  position: absolute; left: -2.6cqw; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 3.9cqw; height: 3.9cqw; border-radius: 50%;
  border: 0.45cqw solid var(--surface);
  background: var(--info); color: #fff;
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700; line-height: 1;
}
.tc-workflows__ic {
  display: grid; place-items: center; flex: none;
  width: 4.8cqw; height: 4.8cqw; border-radius: 1.2cqw;
  font-size: 2.6cqw;
}
.tc-workflows__txt { min-width: 0; }
.tc-workflows__txt small {
  display: block;
  font-family: var(--mono); font-size: 1.95cqw; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.tc-workflows__txt span { display: block; font-size: 2.5cqw; font-weight: 600; color: var(--text); line-height: 1.25; white-space: nowrap; }

.tc-workflows__step--mail { border-left-color: var(--indigo); }
.tc-workflows__step--mail .tc-workflows__n { background: var(--indigo); }
.tc-workflows__step--mail .tc-workflows__ic { background: color-mix(in oklab, var(--indigo) 15%, var(--surface)); color: var(--indigo); }
.tc-workflows__step--mail small { color: var(--indigo); }
.tc-workflows__step--sms { border-left-color: #ec4899; }
.tc-workflows__step--sms .tc-workflows__n { background: #ec4899; }
.tc-workflows__step--sms .tc-workflows__ic { background: color-mix(in oklab, #ec4899 15%, var(--surface)); color: var(--pink); }
.tc-workflows__step--sms small { color: var(--pink); }
.tc-workflows__step--stop { border-left-color: var(--danger); }
.tc-workflows__step--stop .tc-workflows__n { background: var(--danger); }
.tc-workflows__step--stop .tc-workflows__ic { background: color-mix(in oklab, var(--danger) 13%, var(--surface)); color: var(--danger); }
.tc-workflows__step--stop small { color: var(--danger); }

/* séparateur « Autour de la séance » posé sur le trait */
.tc-workflows__sep {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 1cqw 0;
}
.tc-workflows__sep span {
  padding: 0.5cqw 1.8cqw;
  border: 1px solid color-mix(in oklab, var(--info) 45%, transparent);
  border-radius: 5cqw;
  background: color-mix(in oklab, var(--info) 12%, var(--surface));
  color: var(--info);
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}

/* la séance réservée, repère bleu */
.tc-workflows__occ {
  position: relative;
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 1cqw 1.8cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(100deg, #2563eb, #3b82f6);
  color: #fff;
  font-size: 2.4cqw;
}
.tc-workflows__occ b {
  font-family: var(--mono); font-size: 1.95cqw; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
.tc-workflows__occ span { margin-left: auto; font-family: var(--mono); font-size: 2.2cqw; font-weight: 700; }

/* « + » actif, relié au menu d'ajout */
.tc-workflows__plus {
  position: relative; z-index: 1;
  align-self: center;
  display: grid; place-items: center;
  width: 4.2cqw; height: 4.2cqw; border-radius: 50%;
  background: var(--lime); color: var(--on-lime);
  font-size: 2.6cqw;
  box-shadow: 0 0 0 0.8cqw color-mix(in oklab, var(--lime) 25%, transparent);
}
.tc-workflows__plus::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 28cqw; margin-left: 1.2cqw;
  border-top: 0.35cqw dashed color-mix(in oklab, var(--lime) 70%, transparent);
}

/* colonne de droite : état + menu d'ajout */
.tc-workflows__side {
  position: absolute; right: 4cqw; top: 2.6cqw; bottom: 2.6cqw; width: 33cqw;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
}
.tc-workflows__state {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 1cqw;
  padding: 0.7cqw 1.8cqw;
  border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent);
  border-radius: 5cqw;
  background: color-mix(in oklab, var(--ok) 12%, var(--surface));
  color: var(--ok);
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700; white-space: nowrap;
}
.tc-workflows__state i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0.6cqw color-mix(in oklab, var(--ok) 25%, transparent); }

.tc-workflows__pop {
  position: relative;
  padding: 1.2cqw;
  border: 1px solid var(--line);
  border-radius: 2cqw;
  background: var(--surface);
  box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, 0.45);
}
.tc-workflows__pop-h {
  padding: 0.4cqw 1cqw 1cqw;
  font-family: var(--mono); font-size: 1.9cqw; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.tc-workflows__it {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 0.75cqw 1cqw;
  border-radius: 1.2cqw;
  font-size: 2.35cqw; font-weight: 600; color: var(--text); white-space: nowrap;
}
.tc-workflows__it.is-hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tc-workflows__it-ic {
  display: grid; place-items: center; flex: none;
  width: 4.2cqw; height: 4.2cqw; border-radius: 1.1cqw;
  font-size: 2.3cqw;
}
.tc-workflows__it--mail .tc-workflows__it-ic { background: color-mix(in oklab, var(--indigo) 15%, var(--surface)); color: var(--indigo); }
.tc-workflows__it--sms .tc-workflows__it-ic { background: color-mix(in oklab, #ec4899 15%, var(--surface)); color: var(--pink); }
.tc-workflows__it--push .tc-workflows__it-ic { background: color-mix(in oklab, var(--ok) 15%, var(--surface)); color: var(--ok); }
.tc-workflows__it--task .tc-workflows__it-ic { background: color-mix(in oklab, var(--warn) 16%, var(--surface)); color: var(--warn); }
.tc-workflows__it--stop .tc-workflows__it-ic { background: color-mix(in oklab, var(--danger) 13%, var(--surface)); color: var(--danger); }
/* TOUR-CARDS:END */

/* ------------------------------------------------------------
   MESSAGERIE — la boîte de réception /messenger (liste, fil sur fond doodle, fiche adhérent)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   MESSAGERIE — réplique condensée de /messenger (boîte de réception BE)
   Bandeau « Vos conversations » + compteurs, colonne des conversations,
   fil sur fond doodle, fiche adhérent repliable. Classes préfixées mesx-.
   ------------------------------------------------------------ */

/* écran un peu plus serré que le gabarit : trois colonnes pleine hauteur */
.os-screen.mesx-screen { padding: 0.85rem 1.1rem 0.95rem; gap: 0.65rem; }

/* Bandeau : identité à gauche, compteurs et action à droite */
.mesx-hero { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mesx-hero__id { position: relative; min-width: 0; }
.mesx-hero__eyebrow {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-ink);
}
.mesx-hero__eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.mesx-hero__eyebrow .slash { color: var(--text-3); font-weight: 500; }
.mesx-hero__title { margin: 0.1rem 0 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); }
.mesx-hero__title span { color: var(--lime-ink); }
.mesx-hero__right { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: stretch; gap: 0.5rem; }
.mesx-stat {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.mesx-stat > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }
.mesx-stat--warn > i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.mesx-stat span { display: block; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.mesx-stat b { display: block; font-family: var(--mono); font-size: 0.92rem; font-weight: 700; line-height: 1.15; font-feature-settings: "tnum"; color: var(--text); }
.mesx-hero .os-btn { align-self: center; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6rem; }

/* Trois colonnes : conversations, fil, fiche */
.mesx-grid {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 204px;
  gap: 0.6rem;
  align-items: stretch;
}
.mesx-col { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }

/* Colonne des conversations */
.mesx-list__head { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.7rem 0.4rem; }
.mesx-cap { font-family: var(--mono); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.mesx-count { font-family: var(--mono); font-size: 0.52rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-feature-settings: "tnum"; }
.mesx-search {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0.7rem;
  padding: 0.32rem 0.5rem; border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--mono); font-size: 0.56rem; color: var(--text-3); white-space: nowrap; overflow: hidden;
}
.mesx-search .ic { width: 11px; height: 11px; flex: none; }
.mesx-filters { display: flex; gap: 0.2rem; margin: 0.45rem 0.7rem 0.4rem; padding: 0.18rem; background: var(--surface-2); border-radius: 7px; }
.mesx-filters span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.26rem 0.2rem; border-radius: 5px;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.mesx-filters span.on { background: var(--surface); color: var(--lime-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.mesx-filters em { font-style: normal; font-size: 0.48rem; padding: 0 0.28rem; border-radius: 4px; background: var(--lime-soft); color: var(--lime-ink); font-weight: 700; }

.mesx-conv { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem; border-top: 1px solid var(--line-soft); position: relative; }
.mesx-conv.on { background: var(--lime-soft); }
.mesx-conv.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); }
.mesx-conv .av { width: 32px; height: 32px; font-size: 0.64rem; }
.mesx-conv__body { flex: 1; min-width: 0; }
.mesx-conv__top { display: flex; align-items: baseline; gap: 0.4rem; }
.mesx-conv__name { flex: 1; min-width: 0; font-size: 0.72rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesx-conv__at { font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); font-feature-settings: "tnum"; }
.mesx-conv__bottom { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.05rem; }
.mesx-conv__prev { flex: 1; min-width: 0; font-size: 0.62rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesx-conv__prev b { font-weight: 600; color: var(--text); }
.mesx-conv__prev .ic { width: 10px; height: 10px; vertical-align: -1px; color: var(--text-3); }
.mesx-conv.unread .mesx-conv__name, .mesx-conv.unread .mesx-conv__prev { color: var(--text); font-weight: 700; }
.mesx-conv.unread .mesx-conv__at { color: var(--lime-ink); font-weight: 700; }
.mesx-unread { flex: none; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); font-family: var(--mono); font-size: 0.5rem; font-weight: 700; }

/* coches de lecture : une (remis), deux à l'accent du thème (lu) */
.mesx-ticks { display: inline-flex; flex: none; color: var(--text-3); }
.mesx-ticks svg { width: 14px; height: 10px; }
.mesx-ticks.read { color: var(--lime-ink); }

/* Fil central */
.mesx-thread__head { display: flex; align-items: center; gap: 0.55rem; padding: 0.38rem 0.7rem; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 1; }
.mesx-thread__head .av { width: 28px; height: 28px; font-size: 0.6rem; }
.mesx-thread__who { flex: 1; min-width: 0; line-height: 1.35; }
.mesx-thread__who b { font-size: 0.76rem; color: var(--text); }
.mesx-thread__who small { display: block; font-size: 0.56rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesx-tag { display: inline-block; margin-left: 0.35rem; padding: 0.02rem 0.35rem; border-radius: 4px; font-family: var(--mono); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ok-bg); color: var(--ok); vertical-align: 1px; }
.mesx-thread__head .os-btn { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.28rem 0.55rem; }
.mesx-iconbtn { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); background: var(--surface-2); }
.mesx-iconbtn .ic { width: 12px; height: 12px; }

.mesx-flow {
  flex: 1; position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.28rem;
  padding: 0.45rem 0.8rem 0.5rem;
  background: var(--surface-2);
}
/* motif continu d'icônes de sport (celui du produit), à peine visible : traits noirs
   en clair, inversés en sombre. Image de fond et non masque : un masque exige une
   requête CORS, qui échoue quand la page est ouverte en file://. */
.mesx-flow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/messagerie/doodle.svg') 0 0 / 300px 300px repeat;
  opacity: 0.08;
  filter: invert(1);
}
@media (prefers-color-scheme: light) {
  .mesx-flow::before { filter: none; opacity: 0.07; }
}
.mesx-day { align-self: center; display: flex; align-items: center; width: 100%; gap: 0.6rem; margin-bottom: 0.1rem; }
.mesx-day::before, .mesx-day::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.mesx-day span { font-family: var(--mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 0.1rem 0.45rem; border-radius: 5px; }

.mesx-msg { max-width: 74%; display: flex; flex-direction: column; }
.mesx-msg--in { align-self: flex-start; }
.mesx-msg--out { align-self: flex-end; }
.mesx-bubble {
  padding: 0.34rem 0.6rem 0.3rem; border-radius: 10px; display: flow-root;
  font-size: 0.68rem; line-height: 1.45; color: var(--text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.mesx-msg--in .mesx-bubble { background: var(--surface); border-top-left-radius: 3px; }
/* envoyé : gris neutre dans les deux thèmes, jamais vert */
.mesx-msg--out .mesx-bubble { background: color-mix(in oklab, var(--surface) 84%, var(--text) 16%); border-top-right-radius: 3px; }
.mesx-author { display: block; margin-bottom: 0.08rem; font-family: var(--mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-ink); }
.mesx-meta { float: right; display: inline-flex; align-items: center; gap: 0.25rem; margin: 0.32rem 0 0 0.7rem; line-height: 1; font-family: var(--mono); font-size: 0.48rem; color: var(--text-3); font-feature-settings: "tnum"; }
.mesx-meta .mesx-ticks svg { width: 12px; height: 9px; }

.mesx-file {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.1rem;
  padding: 0.35rem 0.55rem 0.35rem 0.35rem; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.mesx-filerow { display: flex; align-items: flex-end; }
.mesx-filerow .mesx-meta { float: none; margin: 0 0 0.1rem 0.7rem; }
.mesx-file__ext { width: 26px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--danger-bg); color: var(--danger); font-family: var(--mono); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.06em; }
.mesx-file b { display: block; font-size: 0.62rem; color: var(--text); }
.mesx-file small { display: block; font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); }

.mesx-compose { padding: 0.4rem 0.7rem 0.3rem; border-top: 1px solid var(--line); background: var(--surface); }
.mesx-compose__row { display: flex; align-items: center; gap: 0.4rem; }
.mesx-input {
  flex: 1; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.38rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--lime-edge); box-shadow: 0 0 0 2px var(--lime-soft);
  font-size: 0.64rem; color: var(--text-3);
}
.mesx-input .ic { width: 13px; height: 13px; color: var(--text-3); flex: none; }
.mesx-input span { flex: 1; }
.mesx-send { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.mesx-send .ic { width: 12px; height: 12px; }
.mesx-hint { margin-top: 0.18rem; text-align: right; font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* Fiche adhérent */
.mesx-card__head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line-soft); }
.mesx-card__head .mesx-cap { font-weight: 500; color: var(--lime-ink); }
.mesx-card__head .mesx-cap .slash { color: var(--text-3); }
.mesx-card__x { color: var(--text-3); font-size: 0.8rem; line-height: 1; }
.mesx-card__id { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.7rem; background: linear-gradient(160deg, var(--lime-soft), transparent 70%); }
.mesx-card__id .av { width: 38px; height: 38px; font-size: 0.78rem; }
.mesx-card__id b { display: block; font-size: 0.74rem; color: var(--text); }
.mesx-card__id small { display: block; font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); }
.mesx-block { padding: 0.45rem 0.7rem; border-top: 1px solid var(--line-soft); }
.mesx-block h4 { margin: 0 0 0.3rem; font-family: var(--mono); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.mesx-kv { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6rem; line-height: 1.75; color: var(--text-2); }
.mesx-kv b { font-family: var(--mono); font-size: 0.56rem; color: var(--text); font-feature-settings: "tnum"; white-space: nowrap; }
.mesx-kv .mesx-tag { margin: 0; align-self: center; }
.mesx-resa { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.6rem; color: var(--text); }
.mesx-resa span { font-family: var(--mono); font-size: 0.52rem; color: var(--text-3); white-space: nowrap; }
.mesx-notif { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; line-height: 1.7; color: var(--text); }
.mesx-notif i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); flex: none; }
.mesx-notif.off { color: var(--text-3); }
.mesx-notif.off i { background: var(--text-3); box-shadow: none; opacity: 0.6; }

/* Visuels des deep dives */
.mesx-demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); }
.mesx-demo__cap { display: block; margin-bottom: 0.8rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-ink); }
.mesx-demo__cap .slash { color: var(--text-3); }
.mesx-field { padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.86rem; color: var(--text); background: var(--surface-2); margin-bottom: 0.55rem; }
.mesx-field--area { min-height: 5.2rem; line-height: 1.55; color: var(--text-2); }
.mesx-field small { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.15rem; }
.mesx-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--text-2); margin: 0.35rem 0; }
.mesx-check i { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--line); display: grid; place-items: center; }
.mesx-check.on i { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.mesx-check i .ic { width: 11px; height: 11px; }
.mesx-check b { font-family: var(--mono); font-size: 0.78rem; color: var(--text); font-weight: 600; }
.mesx-demo__foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.mesx-demo__foot .os-btn { font-size: 0.78rem; padding: 0.45rem 0.9rem; }

.mesx-push { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 0.9rem; }
.mesx-push__ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); font-weight: 900; font-size: 0.8rem; }
.mesx-push__body { flex: 1; min-width: 0; }
.mesx-push__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mesx-push b { display: block; font-size: 0.9rem; color: var(--text); margin-top: 0.1rem; }
.mesx-push p { margin: 0.1rem 0 0; font-size: 0.86rem; color: var(--text-2); }
.mesx-demo .mesx-notif { font-size: 0.88rem; line-height: 1.9; }
.mesx-demo .mesx-block { padding: 0.7rem 0 0; border-top: 1px solid var(--line-soft); }
.mesx-demo .mesx-block h4 { font-size: 0.62rem; }
.mesx-note { display: block; font-size: 0.8rem; color: var(--text-3); margin-top: 0.2rem; }

.mesx-rows .mesx-conv { padding: 0.65rem 0.2rem; }
.mesx-rows .mesx-conv .av { width: 38px; height: 38px; font-size: 0.74rem; }
.mesx-rows .mesx-conv__name { font-size: 0.9rem; }
.mesx-rows .mesx-conv__prev { font-size: 0.8rem; }
.mesx-rows .mesx-conv__at { font-size: 0.64rem; }
.mesx-rows .mesx-unread { min-width: 18px; height: 18px; font-size: 0.62rem; }
.mesx-rows .mesx-conv.on::before { display: none; }
.mesx-menu {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.2rem 0 0.4rem 3.4rem;
  padding: 0.4rem 0.7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
  font-size: 0.8rem; color: var(--text); box-shadow: var(--shadow-1);
}
.mesx-menu .ic { width: 14px; height: 14px; color: var(--lime-ink); }

/* Téléphone : la fiche se replie, les conversations passent au-dessus du fil */
@media (max-width: 720px) {
  .mesx-hero { flex-wrap: wrap; }
  .mesx-hero__right { margin-left: 0; flex-wrap: wrap; }
  .mesx-grid { grid-template-columns: minmax(0, 1fr); }
  .mesx-col--card { display: none; }
  .mesx-list .mesx-conv ~ .mesx-conv ~ .mesx-conv { display: none; }
  .mesx-hero .pg-hero__wedge { display: none; }
  .mesx-msg { max-width: 86%; }
}


/* ------------------------------------------------------------
   ABONNEMENTS — la fiche /subscription/{id} (remises, pauses, échéancier, SEPA)
   ------------------------------------------------------------ */
/* ============================================================
   ABONNEMENTS — page fonctionnalites/abonnements.html
   Réplique condensée de /subscription/{id} (fiche abonnement BE) :
   en-tête « Client sur Produit » + menu Actions ouvert, détails,
   puis les échéances : périodes en frise à gauche, détail à droite. Visuels des deep dives.
   Toutes les couleurs passent par les variables de os.css.
   ============================================================ */

/* ---------- En-tête de la fiche ---------- */
.abox-head .pg-hero__title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.abox-head__sub {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.abox-head.pg-hero { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.abox-body.pg-card__body { padding: 0.55rem 0.85rem 0.65rem; }
.abox-actions-btn { gap: 0.35rem; }
.abox-actions-btn .ic { width: 11px; height: 11px; }

/* ---------- Corps : détails à gauche, menu Actions ouvert à droite ---------- */
.abox-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.2rem;
  gap: 1rem;
  align-items: start;
}

.abox-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin-bottom: 0.35rem;
}
.abox-fact { padding: 0 1rem; border-left: 1px solid var(--line); }
.abox-fact:first-child { padding-left: 0.1rem; border-left: 0; }
.abox-fact__l {
  display: block;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.15rem;
}
.abox-fact__v { font-size: 0.8rem; font-weight: 600; color: var(--text); font-feature-settings: "tnum"; }
.abox-fact__v small { font-weight: 500; color: var(--text-3); font-size: 0.72rem; }

.abox-next {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--lime-edge);
  background: var(--lime-soft);
  color: var(--lime-ink);
  font-size: 0.74rem;
  font-weight: 700;
}
.abox-next span { font-weight: 500; }

.abox-dl { margin: 0; display: grid; grid-template-columns: 8.6rem minmax(0, 1fr); row-gap: 0.1rem; }
.abox-dl dt,
.abox-dl dd {
  margin: 0;
  padding: 0.2rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
}
.abox-dl dt { color: var(--text-3); }
.abox-dl dd { color: var(--text); display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.abox-dl dt:first-of-type,
.abox-dl dd:first-of-type { border-top: 0; }
.abox-link { color: var(--lime-ink); font-size: 0.72rem; font-weight: 600; }

.abox-price,
.abox-disc {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.abox-price { background: var(--ok-bg); color: var(--ok); }
.abox-disc { background: var(--lime-soft); color: var(--lime-ink); border: 1px solid var(--lime-edge); }
.abox-disc span { font-family: var(--sans); font-weight: 500; }

.abox-sepa {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.abox-sepa b {
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--info);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

/* Menu Actions déplié (même contenu que le vrai menu) */
.abox-menu {
  position: relative;
  margin-top: -0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  padding: 0.3rem;
}
.abox-menu::before {
  content: "";
  position: absolute;
  top: -6px; left: 1.4rem;
  width: 10px; height: 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.abox-menu__it {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  font-size: 0.74rem;
  color: var(--text-2);
}
.abox-menu__it .ic { width: 13px; height: 13px; color: var(--text-3); flex: none; }
.abox-menu__it--on { background: var(--lime-soft); color: var(--lime-ink); font-weight: 600; }
.abox-menu__it--on .ic { color: var(--lime-ink); }
.abox-menu__it--danger { color: var(--danger); }
.abox-menu__it--danger .ic { color: var(--danger); }
.abox-menu__sep { display: block; height: 1px; background: var(--line); margin: 0.25rem 0.3rem; }

/* ---------- Échéances : périodes en frise à gauche, détail de la période à droite ---------- */
.abox-sched { margin-top: 1.3rem; }
.abox-sched .scr-sec { margin-bottom: 0.35rem; }
.abox-sched__grid {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

/* Frise verticale : un trait, un point par période */
.abox-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 0.95rem;
}
.abox-tl::before {
  content: "";
  position: absolute;
  left: 0.25rem; top: 0.8rem; bottom: 1.1rem;
  width: 1px;
  background: var(--line);
}
.abox-tl__prev {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--lime-ink);
  white-space: nowrap;
}
.abox-tl__per {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  padding: 0.22rem 0.5rem 0.26rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.abox-tl__per::before {
  content: "";
  position: absolute;
  left: calc(-0.7rem - 3.5px); top: 0.5rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 2px var(--bg-raise);
}
.abox-tl__d {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.abox-tl__d .tag { font-size: 0.52rem; padding: 0.1rem 0.35rem; }
.abox-tl__ok { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.64rem; font-weight: 600; color: var(--ok); }
.abox-tl__ok .ic { width: 11px; height: 11px; }
.abox-tl__st { font-size: 0.64rem; font-weight: 600; color: var(--violet); }
.abox-tl__chips { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.abox-tl__chips .tag { font-size: 0.52rem; padding: 0.1rem 0.35rem; }

.abox-amt,
.abox-pct,
.abox-pend {
  display: inline-flex;
  align-items: center;
  padding: 0.02rem 0.38rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.abox-amt { background: none; color: var(--text); padding-left: 0; }
.abox-pct { background: none; color: var(--text-3); }
.abox-pend { background: none; color: var(--text-2); font-family: var(--sans); font-weight: 500; }
.abox-pend::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 0.3rem; border-radius: 50%; background: var(--warn); vertical-align: middle; }

.abox-tl__per--paid::before { background: var(--ok); }
.abox-tl__per--on {
  border-color: var(--lime-edge);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--lime-edge);
}
.abox-tl__per--on::before { background: var(--lime); box-shadow: 0 0 0 2px var(--bg-raise), 0 0 0 4px var(--lime-edge); }
.abox-tl__per--pause {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--line-soft) 7px 9px),
    var(--surface);
  border-style: dashed;
}
.abox-tl__per--pause::before { background: var(--violet); }

/* Détail de la période sélectionnée */
.abox-pd {
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.abox-pd__head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.abox-pd__title { font-size: 0.82rem; font-weight: 650; color: var(--text); font-feature-settings: "tnum"; }
.abox-pd__coupon {
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.64rem;
  color: var(--text-2);
}
.abox-pd__btn { margin-left: auto; gap: 0.3rem; font-size: 0.6rem; padding: 0.28rem 0.55rem; }
.abox-pd__btn .ic { width: 10px; height: 10px; }

.abox-pd__pay { display: flex; flex-wrap: wrap; }
.abox-pd__pay > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0.85rem;
  border-left: 1px solid var(--line);
}
.abox-pd__pay > span:first-child { padding-left: 0; border-left: 0; }
.abox-pd__pay em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.abox-pd__pay b { font-size: 0.76rem; font-weight: 650; color: var(--text); font-feature-settings: "tnum"; }
.abox-pd__pay .abox-sepa { font-size: 0.68rem; color: var(--text); }

.abox-inv { width: 100%; border-collapse: collapse; font-size: 0.7rem; font-feature-settings: "tnum"; }
.abox-inv th {
  padding: 0.18rem 0.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}
.abox-inv td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--line-soft); color: var(--text); text-align: right; white-space: nowrap; vertical-align: top; }
.abox-inv th:first-child,
.abox-inv td:first-child { text-align: left; white-space: normal; padding-left: 0.1rem; }
.abox-inv__pend td { background: color-mix(in oklab, var(--warn) 5%, transparent); }
.abox-inv__pend td:first-child { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--warn) 55%, transparent); padding-left: 0.45rem; }
.abox-inv__tag { display: block; margin-top: 0.1rem; font-size: 0.6rem; font-weight: 500; color: var(--text-3); width: max-content; max-width: 100%; }
.abox-inv tfoot td { border-bottom: 0; padding-top: 0.32rem; padding-bottom: 0.1rem; color: var(--text-3); font-size: 0.66rem; }
.abox-inv tfoot td:first-child { text-align: right; }
.abox-inv tfoot td span { color: var(--text-2); font-weight: 600; }
.abox-inv tfoot b { color: var(--text); font-size: 0.74rem; font-weight: 800; margin-left: 0.9rem; }
.abox-inv tfoot .abox-inv__total { color: var(--text); font-size: 0.78rem; font-weight: 800; }

/* ---------- Visuels des deep dives ---------- */
.abox-viz { box-shadow: var(--shadow-1); }
.abox-viz .pane__body { display: flex; flex-direction: column; gap: 0.55rem; }
.abox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-raise);
  font-size: 0.8rem;
}
.abox-row__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.abox-row__main b { color: var(--text); font-weight: 650; }
.abox-row__main small { color: var(--text-3); font-size: 0.72rem; }
.abox-row__end { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.76rem; font-feature-settings: "tnum"; color: var(--text); white-space: nowrap; }
.abox-row__ic {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
}
.abox-row__ic .ic { width: 14px; height: 14px; }
.abox-row__ic--ok { background: var(--ok-bg); color: var(--ok); }
.abox-row__ic--danger { background: var(--danger-bg); color: var(--danger); }
.abox-row__ic--warn { background: var(--warn-bg); color: var(--warn); }
.abox-row__ic--lime { background: var(--lime-soft); color: var(--lime-ink); }
.abox-row--muted { opacity: 0.75; }

.abox-code {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem 0.45rem 0.7rem;
  border: 1px dashed var(--lime-edge);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-2);
}
.abox-code b { font-family: var(--mono); color: var(--lime-ink); letter-spacing: 0.06em; }
.abox-code .tag { margin-left: auto; }

.abox-kv { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.35rem 0.8rem; margin: 0; font-size: 0.8rem; }
.abox-kv dt { color: var(--text-3); margin: 0; }
.abox-kv dd { color: var(--text); margin: 0; font-weight: 600; }

.abox-rules { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.abox-rules li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-2); }
.abox-rules .ic { width: 13px; height: 13px; color: var(--ok); flex: none; }

.abox-steps { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.abox-step {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-3);
}
.abox-step--done { color: var(--text-2); }
.abox-step--on { border-color: var(--lime-edge); background: var(--lime-soft); color: var(--lime-ink); font-weight: 700; }

.abox-choice {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.78rem;
}
.abox-choice i {
  flex: none;
  width: 12px; height: 12px;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.abox-choice b { display: block; color: var(--text); font-weight: 650; }
.abox-choice small { color: var(--text-3); font-size: 0.72rem; }
.abox-choice--on { border-color: var(--lime-edge); background: var(--lime-soft); }
.abox-choice--on i { border-color: var(--lime-ink); background: radial-gradient(circle, var(--lime-ink) 0 3px, transparent 3.5px); }

.abox-note {
  font-size: 0.74rem;
  color: var(--text-3);
  padding-top: 0.45rem;
  border-top: 1px solid var(--line-soft);
}
.abox-note b { color: var(--text-2); font-weight: 600; }

/* ---------- Petites largeurs (fenêtre en flux naturel) ---------- */
@media (max-width: 759px) {
  .abox-top { grid-template-columns: minmax(0, 1fr); }
  /* le menu déplié mangerait la hauteur plafonnée de la fenêtre : on garde détails et échéances */
  .abox-menu { display: none; }
  .abox-head .pg-hero__wedge { display: none; }
  .abox-facts { grid-template-columns: auto auto; margin-bottom: 0.4rem; }
  .abox-fact:nth-child(2) { display: none; }
  .abox-dl { grid-template-columns: minmax(0, 1fr); }
  .abox-dl dt { padding: 0.45rem 0 0.1rem; font-size: 0.68rem; }
  .abox-dl dd { padding: 0 0 0.45rem; border-top: 0; }
  .abox-dl dd .abox-link:not([data-mark-target]) { display: none; }
  .abox-disc { white-space: nowrap; }
  .abox-sched__grid { grid-template-columns: minmax(0, 1fr); }
  .abox-pd { padding-left: 0; border-left: 0; }
  .abox-pd__coupon { display: none; }
  /* fenêtre plafonnée : on garde les repères, la remise, la période sélectionnée, la pause et la ligne en attente */
  .abox-dl dt:not(:nth-of-type(2)), .abox-dl dd:not(:nth-of-type(2)) { display: none; }
  .abox-dl dt:nth-of-type(2) { border-top: 0; }
  .abox-tl__per--paid, .abox-tl__per:last-child { display: none; }
  .abox-pd__pay { display: none; }
  .abox-pd__btn, .abox-inv thead { display: none; }
  .abox-pd__title { font-size: 0.78rem; }
  .abox-inv__tag { width: auto; }
  .abox-inv th:nth-child(2), .abox-inv td:nth-child(2),
  .abox-inv th:nth-child(3), .abox-inv td:nth-child(3) { display: none; }
  .abox-inv tfoot td[colspan] { text-align: right; }
  .abox-head .pg-hero__title { font-size: 0.95rem; }
  .abox-kv { grid-template-columns: 7rem minmax(0, 1fr); }
}
/* page Abonnements allégée : une seule couleur d'accent par zone, le reste en tons neutres */
.abox-link { color: var(--text-3) !important; font-weight: 500 !important; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.abox-price { background: none !important; border: none !important; color: var(--text-2) !important; padding: 0 !important; }
.abox-tl__next { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime-ink); }
.abox-tl__req { font-size: 0.6rem; color: var(--text-3); }
.abox-tl__st { color: var(--text-2) !important; }
.abox-tl__per--pause { background: var(--surface) !important; border-style: dashed !important; }

/* ------------------------------------------------------------
   MOBILE — accueil (revue 390 px)
   ------------------------------------------------------------ */
/* ============================================================
   ACCUEIL (index.html) — affichage mobile
   Tout est sous @media (max-width) : la version bureau est
   inchangée, hormis le <summary> du comparatif des frais,
   masqué au-delà de 720 px. Le JS associé est dans os.js,
   bloc « ACCUEIL (index.html) — affichage mobile ».
   ============================================================ */

/* Indicateur des carrousels et bouton « Voir les N autres questions » :
   n'existent qu'en mobile */
.m-rail-hint, .faq-more, .card-more { display: none; }

/* Comparatif des frais : le <details> reste ouvert et invisible sur ordinateur */
.compare-fold > summary { list-style: none; }
.compare-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) {
  .compare-fold > summary { display: none; }
}

@media (max-width: 720px) {
  /* ---------- Carrousels : visite guidée (L1) et témoignages (L2) ---------- */
  .m-rail-hint {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
    margin: -0.4rem 0 0.7rem;
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lime-ink);
  }
  .m-rail-hint [data-rail-pos] { color: var(--text-3); font-feature-settings: "tnum" 1; }
  .m-rail-hint.is-end { color: var(--text-3); }

  .tour-grid[data-rail], .testimonials[data-rail] {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    margin: 0 -1.5rem;
    padding: 0.2rem 1.5rem 0.8rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tour-grid[data-rail]::-webkit-scrollbar, .testimonials[data-rail]::-webkit-scrollbar { display: none; }
  .testimonials[data-rail] { grid-auto-columns: 88%; align-items: stretch; }
  .tour-grid[data-rail] > *, .testimonials[data-rail] > * { scroll-snap-align: start; min-width: 0; }
  /* dans un carrousel, la révélation au défilement vertical n'a pas de sens */
  [data-rail] > .reveal { opacity: 1; transform: none; }
  .tour-grid[data-rail] .tour-card:hover { transform: none; }

  /* Témoignages : « 0 € » et « < 24h » sont déjà dans #migration */
  #testimonials .metrics .metric:nth-child(-n+2) { display: none; }
  #testimonials .metrics { margin-top: 1.6rem !important; }

  /* ---------- « Le vrai quotidien d'un owner » (L3) : icône + titre ---------- */
  #quotidien .split__visual .grid-2 { grid-template-columns: 1fr 1fr; gap: 0.6rem !important; }
  #quotidien .split__visual .card { padding: 0.9rem 0.9rem 0.95rem; display: flex; flex-direction: column; gap: 0.55rem; }
  #quotidien .split__visual .card__icon { margin: 0; width: 32px; height: 32px; }
  #quotidien .split__visual .card__title { margin: 0; font-size: 0.9rem; line-height: 1.25; }
  #quotidien .split__visual .card__text { display: none; }

  /* ---------- App membre (L5) et migration (L9) : visuels redondants ---------- */
  #app .split__visual,
  #migration .split__visual { display: none; }

  /* ---------- Comparatif Wodz / autres (I3) : cartes empilées ---------- */
  #comparison .compare-wrap { padding: 0.4rem 1.1rem !important; }
  #comparison .compare-scroll { overflow: visible; }
  #comparison .compare-scrollhint, #comparison .compare thead { display: none; }
  #comparison .compare,
  #comparison .compare tbody,
  #comparison .compare tr,
  #comparison .compare td { display: block; width: auto; min-width: 0; }
  #comparison .compare tr { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
  #comparison .compare tr:last-child { border-bottom: 0; }
  #comparison .compare td { border: 0; padding: 0.12rem 0; }
  #comparison .compare td.highlight,
  #comparison .compare td:last-child { position: relative; padding-left: 4.4rem; }
  #comparison .compare td:first-child { color: var(--text); font-weight: 700; margin-bottom: 0.3rem; }
  #comparison .compare td.highlight { background: none; color: var(--text); }
  #comparison .compare td.highlight::before,
  #comparison .compare td:last-child::before {
    position: absolute; left: 0; top: 0.45em;
    font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  }
  #comparison .compare td.highlight::before { content: "Wodz"; color: var(--lime-ink); }
  #comparison .compare td:last-child::before { content: "Autres"; color: var(--text-3); }

  /* ---------- Socle (L7) : texte limité à 4 lignes ---------- */
  #socle .grid-4 { gap: 0.8rem; }
  #socle a.card .card__text,
  #socle .card--clamp .card__text {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  #socle a.card::after {
    content: "Le détail →"; grid-column: 1 / -1; margin-top: 0.55rem;
    font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lime-ink);
  }
  .card-more {
    display: inline-flex; align-items: center; justify-self: start; grid-column: 1 / -1;
    margin-top: 0.4rem; min-height: 44px; padding: 0 0.1rem;
    background: none; border: 0; cursor: pointer;
    font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lime-ink);
  }

  /* ---------- Comparatif des frais (I4) : replié derrière un bouton ---------- */
  .compare-fold { margin-top: 2.2rem; }
  .compare-fold > summary {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 48px; padding: 0.8rem 1.2rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text); cursor: pointer;
  }
  .compare-fold > summary::after { content: "+"; color: var(--lime-ink); font-size: 1rem; }
  .compare-fold[open] > summary::after { content: "−"; }
  .compare-fold > .compare-wrap { margin-top: 0.8rem; padding: 1.2rem 1rem; }
  .compare-fold .compare-title { display: none; }

  /* ---------- FAQ (L6) : 6 questions, puis bouton ---------- */
  .faq-list--short .faq-item:nth-child(n+7) { display: none; }
  .faq-more {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 780px; margin: 0.9rem auto 0; min-height: 48px; padding: 0.8rem 1rem;
    border: 1px solid var(--line); border-radius: var(--r-md); background: none; cursor: pointer;
    font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lime-ink);
  }
}

@media (max-width: 480px) {
  /* ---------- Hero (C1, C3) ---------- */
  .hero .eyebrow { letter-spacing: 0.12em; font-size: 0.64rem; }
  .hero .eyebrow .slash { display: none; }
  .hero .statline { flex-direction: column; align-items: center; gap: 0.25rem; }
  .hero .statline__sep { display: none; }

  /* ---------- Activités (L4) : deux colonnes, titres seuls ---------- */
  #activities .grid-4 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  #activities .grid-4 .card { display: block; padding: 1.15rem 0.9rem 0.95rem 1.05rem; }
  #activities .card__title { margin: 0; font-size: 0.92rem; }
  #activities .card__text { display: none; }

  /* ---------- FAQ : moins de retrait à gauche des réponses ---------- */
  .faq-item__a p { padding-left: 1.3rem; }

  /* ---------- Pied de page (L8) ---------- */
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; row-gap: 2rem; }
  .site-footer .footer-brand,
  .site-footer .footer-col--features { grid-column: 1 / -1; }
  .site-footer .footer-col--features .footer-col__links { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .site-footer .footer-col--features { order: 1; }
  .site-footer .footer-col:not(.footer-col--features) { order: 2; }
}

/* ---------- Hero (C4) et surtitres à 360 px ---------- */
@media (max-width: 400px) {
  .hero .chip { font-size: 0.62rem; padding: 0.35rem 0.6rem; }
  .hero .eyebrow { font-size: 0.6rem; letter-spacing: 0.06em; gap: 0.45rem; }
  /* surtitres de section (« section 02 // Adapté à votre activité ») sur une ligne */
  .sec-head .eyebrow { flex-wrap: wrap; justify-content: center; gap: 0.4rem; font-size: 0.62rem; letter-spacing: 0.1em; }
}


/* ------------------------------------------------------------
   MOBILE — pages (revue 390 px)
   ------------------------------------------------------------ */
/* ============================================================
   Correctifs mobiles des pages fonctionnalites/* (à fusionner)
   Tout est sous @media (max-width: …), sauf la règle de base du sur-titre
   partenaires (rendu identique à l'avant) : rien ne change sur ordinateur.
   ============================================================ */

/* Sur-titre partenaires : même rythme que les autres éléments du sur-titre. */
.scr-hero__eyebrow-more { display: inline-flex; align-items: center; gap: 0.55rem; }

@media (max-width: 759px) {
  /* Adhérents (I3) : tableau clients. On garde Client, Statut et
     Dern. séance (cibles des pastilles 2 et 3) ; l'e-mail et
     « Produit actif » tombent. */
  .tbl:has(.who) .who small { display: none; }
  .tbl:has(.who) th:nth-child(3),
  .tbl:has(.who) td:nth-child(3) { display: none; }
  .tbl:has(.who) td { white-space: normal; padding-inline: 0.3rem; }
  .tbl:has(.who) td.num { white-space: nowrap; }
  .tbl:has(.who) th.num { white-space: normal; }

  /* Paiements (I2) : synthèse sous le graphe, pleine largeur. */
  .rev { grid-template-columns: 1fr; }
  .rev__sum { padding: 0.6rem 0.8rem; }
  .rev__tot b { white-space: nowrap; }
  .rev__line b { white-space: nowrap; }
  .scr-sec:has(+ .pane .rev) .scr-sec__count,
  .scr-sec:has(+ .pane .rev) .scr-sec__eyebrow .dim,
  .scr-sec:has(+ .tbl) .scr-sec__eyebrow .dim { display: none; }
  /* Le biseau citron masquait « Septembre 2026 ». */
  .pg-hero:has(.pg-actions__spacer) .pg-hero__wedge { display: none; }

  /* Messagerie (C7) : micro-libellés des maquettes « En situation ». */
  .mesx-demo .mesx-block h4,
  .mesx-demo .mesx-field small { font-size: 0.68rem; }

  /* Partenaires externes (I10) : sur-titre réduit à « // Partenaires »,
     il ne passe plus sous le coin citron. */
  .scr-hero__eyebrow-more { display: none; }
}

@media (max-width: 720px) {
  /* Fil d'Ariane (C1) : si le dernier segment ne tient pas, il passe
     entier à la ligne au lieu de se couper sur son tiret. */
  .crumb { flex-wrap: wrap; row-gap: 0.2rem; }

  /* Newsletters (12), Paiements (C5) : dans une rangée de 3 KPI passée
     sur 2 colonnes, la 3e tuile prend toute la ligne au lieu de laisser un trou. */
  .kpi-row--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Newsletters (13) : « En situation », deux puces par scène. */
  .nl-scenes .split__copy .ticks li:nth-child(n+3) { display: none; }

  /* Intégrations (16) : cibles tactiles du choix de statut. */
  .radio-pill label { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 480px) {
  /* Paiements (C5) : les lignes de catalogue gardent le prix à droite,
     le sous-titre passe à la ligne plutôt que de pousser le prix dessous. */
  .lrow:has(.lrow__amount) .lrow__who { flex: 1 1 0; }
  .lrow:has(.lrow__amount) .lrow__sub { white-space: normal; }

  /* Multi-sites (15) : tous les badges sous le nom, alignés sur le texte. */
  .ms-sites .lrow__end { flex-basis: 100%; margin-left: calc(28px + 0.6rem); }
  .ms-sites .lrow__name { white-space: normal; }
}

@media (max-width: 380px) {
  /* Abonnements (C5) : la pastille de prochaine facture tient sur une ligne. */
  .abox-next { white-space: nowrap; font-size: 0.62rem; }
}

/* Workflows (I9) : sous 720 px, <picture> sert un recadrage WebP du canevas
   (13 à 26 Ko au lieu de 236 à 274 Ko) ; capture claire adoucie en sombre. */
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .split__visual figure picture img { filter: brightness(0.9); }
}


/* ------------------------------------------------------------
   MOBILE — planning (revue 390 px)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   MOBILE — planning (.cal) et programmation (.prg)
   Sur téléphone, la semaine ne tient pas en 7 colonnes lisibles :
   on garde la semaine entière, mais en défilement horizontal assumé,
   comme l'application sur petit écran. Colonnes calées pour montrer
   un bout du jour suivant (l'indice qu'il y a une suite), colonne des
   heures collée à gauche, et un libellé « Glissez » au-dessus.
   Les pastilles suivent le défilement (os.js, bloc « démos défilantes »).
   ------------------------------------------------------------ */
@media (max-width: 759px) {
  /* --- Planning --- */
  .cal-wrap { gap: 0.9rem; }
  .cal {
    container-type: inline-size;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 30px;
    scrollbar-width: none;
  }
  .cal::-webkit-scrollbar { display: none; }
  .cal__head,
  .cal__body {
    width: max-content;
    min-width: 100%;
    grid-template-columns: 30px repeat(7, 84px);
    grid-template-columns: 30px repeat(7, calc((100cqw - 30px) / 3.45));
  }
  /* overflow:hidden ferait du corps son propre conteneur de défilement et
     casserait la colonne des heures collée à gauche */
  .cal__body { overflow: clip; grid-auto-rows: 50px; }
  .cal__head .cal__day:not(:first-child) { scroll-snap-align: start; }
  .cal__head .cal__day:first-child,
  .cal__hour {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  .cal__head .cal__day:first-child { background: var(--surface-2); }
  .cal__hour { background: var(--surface); padding-right: 0.3rem; }
  .cal__head .cal__day:first-child, .cal__hour { box-shadow: 1px 0 0 var(--line-soft); }
  .cal__day { font-size: 0.66rem; }
  .cal__day b { font-size: 0.72rem; }
  .cal-ev { padding: 0.2rem 0.32rem; font-size: 0.6rem; }
  .cal-ev b { font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-ev em { font-size: 0.58rem; margin-left: 0.3rem; }

  /* --- Programmation --- */
  .os-window:has(.prg-week) .pg-hero__wedge { display: none; }
  .os-window:has(.prg-week) .pg-hero__title { font-size: clamp(0.85rem, 4.4vw, 1.05rem); }
  .prg-bar { gap: 0.45rem; }
  .os-screen:has(> .prg-week) { container-type: inline-size; }
  .prg-week {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    grid-auto-columns: calc((100cqw - 0.8rem) / 3.3);
    gap: 0.45rem;
    align-items: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 3px 3px 2px;
    margin: 0 -3px;
  }
  .prg-week::-webkit-scrollbar { display: none; }
  .prg-day { scroll-snap-align: start; min-width: 0; }
  .prg-day__h { font-size: 0.7rem; }
  .prg-card__t { font-size: 0.68rem; overflow-wrap: anywhere; }
  .prg-ph__n { font-size: 0.62rem; }
  .prg-ph__t { font-size: 0.64rem; }

  /* --- Indice de défilement, commun aux deux --- */
  .cal-wrap::before,
  .os-screen:has(> .prg-week) .prg-bar::after {
    content: "Glissez pour voir la semaine \2192";
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .cal-wrap::before { margin-bottom: -0.45rem; text-align: right; }
  .os-screen:has(> .prg-week) .prg-bar::after { flex-basis: 100%; text-align: right; margin-top: 0.1rem; }
}

@media (max-width: 400px) {
  .prg-bar__month { font-size: 0.86rem; }
  .prg-bar__week { font-size: 0.76rem; padding-left: 0.45rem; }
  .prg-bar__copy { font-size: 0.68rem; }
  .prg-day__h { font-size: 0.66rem; }
}


/* ------------------------------------------------------------
   MOBILE — prospection (revue 390 px)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   MOBILE — pipeline de prospection jouable (page Prospection)
   Revue mobile, groupe B : B3, I1, I3, I4. Rien au-dessus de 759 px.
   ------------------------------------------------------------ */
@media (max-width: 759px) {
  /* I3 : fiche ouverte, la fenêtre grandit (plafond 620 px de la fenêtre)
     pour montrer les créneaux sans faire défiler un cadre de 200 px */
  .kbx-open .kbx { min-height: 540px; }
  .kbx-toasting.os-window::after { display: none; }
  .kbx-panel { height: min(520px, 100%); }
  .kbx-modal { padding: 0.35rem; }
  .kbx-head { padding: 0.55rem 0.5rem 0.45rem 0.8rem; }
  .kbx-quick { padding: 0.45rem 0.8rem; }
  .kbx-body { padding: 0.6rem 0.8rem; }

  /* I3 : les 8 jours sur une ligne, qui défile au doigt */
  .kbx-days {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.8rem;
    padding: 0 0.8rem 0.1rem;
    scroll-padding-inline: 0.8rem;
  }
  .kbx-days::-webkit-scrollbar { display: none; }
  .kbx-day { flex: 0 0 auto; min-width: 46px; padding: 0.35rem 0.3rem; }

  /* I4 : cibles tactiles */
  .kbx-close { width: 40px; height: 40px; margin: -0.3rem 0 -0.3rem auto; padding: 0; font-size: 1.35rem; }
  .kbx-back { padding: 0.45rem 0.6rem 0.45rem 0; margin: -0.3rem 0; font-size: 0.7rem; }
  .kbx-cat { padding: 0.55rem 0.8rem; font-size: 0.64rem; }
  .kbx-opt { padding: 0.62rem 0.7rem; }
  .kbx-btn { padding: 0.62rem 1rem; font-size: 0.7rem; }
  .kbx-foot { padding: 0.5rem 0.8rem; }
  .kbx-add { align-self: stretch; padding: 0.5rem 0.2rem 0.5rem 0.6rem; margin: -0.42rem -0.3rem -0.42rem 0; font-size: 0.64rem; }
  .kbx-prod { padding: 0.5rem 0.55rem; }
  .kbx-line { min-height: 36px; }
  .kbx-rm { width: 36px; height: 36px; margin: -0.3rem -0.5rem -0.3rem 0; font-size: 1.1rem; }
  .kbx-clear { padding: 0.45rem 0.7rem; margin: -0.25rem 0; font-size: 0.6rem; }
}

@media (max-width: 720px) {
  /* I1 : le kanban défile à l'horizontale — colonnes aimantées, la suivante
     entame le bord droit, qui s'estompe tant qu'il reste des étapes */
  .kb--pipe {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 84%, transparent);
    mask-image: linear-gradient(to right, #000 84%, transparent);
  }
  .kb--pipe::-webkit-scrollbar { display: none; }
  .kb--pipe.is-end { -webkit-mask-image: none; mask-image: none; }
  .kb--pipe .kb-col { flex: 0 0 43%; scroll-snap-align: start; }

  /* B3 : le message de confirmation tient en bas, sur toute la largeur,
     sans couvrir le haut des colonnes où la carte vient d'arriver */
  .kbx-toast {
    left: 0.5rem; right: 0.5rem; bottom: 0.5rem;
    transform: none;
    max-width: none;
    padding: 0.45rem 0.65rem;
    font-size: 0.64rem;
    line-height: 1.4;
  }
}


/* ------------------------------------------------------------
   MOBILE — tv (revue 390 px)
   ------------------------------------------------------------ */
/* ============================================================
   WODZ TV — affichage téléphone (fichier temporaire, à fusionner)
   ============================================================ */

/* ------------------------------------------------------------
   1. Aperçu du hero : l'écran TV 16:9 réduit à 300 px de large
      donnait du texte de 4 à 7 px. Sous 560 px, il passe en version
      portrait : chrono, titre, phases, niveaux côte à côte à faire
      défiler du doigt, puis les inscrits en pleine largeur.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* le cadre plafonné à 620 px coupait l'écran portrait sous le fondu */
  .os-window[data-fit="16-9"]:has(.tv-cols--capped) { max-height: 780px; }

  .tv-prev .tv-screen { aspect-ratio: auto; }
  .tv-prev .tv-top { padding: 10px 12px 4px; }
  .tv-prev .tv-logo {
    width: 26px;
    height: 26px;
    font-size: 9px;
    box-shadow: 0 0 0 1.5px var(--tv-text);
  }
  .tv-prev .tv-clock { gap: 2px; }
  .tv-prev .tv-clock__t { font-size: 40px; }
  .tv-prev .tv-clock__ms { font-size: 15px; }
  .tv-prev .tv-top__end { gap: 8px; }
  .tv-prev .tv-pause { width: 20px; height: 20px; border-width: 2px; }
  .tv-prev .tv-pause::before { width: 6px; height: 8px; border-left-width: 2px; border-right-width: 2px; }
  .tv-prev .tv-w { width: 18px; height: 18px; }

  .tv-prev .tv-body { grid-template-columns: minmax(0, 1fr); }
  .tv-prev .tv-train { padding: 2px 12px 0; }
  .tv-prev .tv-train__title { margin-bottom: 8px; gap: 10px; font-size: 18px; }
  .tv-prev .tv-phases {
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.03em;
    overflow: hidden;
  }
  .tv-prev .tv-phase { padding: 0 2px 4px; border-bottom-width: 1.5px; }

  /* les trois niveaux restent côte à côte : le suivant dépasse, on glisse */
  .tv-prev .tv-lvls {
    display: flex;
    gap: 12px;
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .tv-prev .tv-lvls::-webkit-scrollbar { display: none; }
  .tv-prev .tv-lvl { flex: 0 0 74%; scroll-snap-align: start; }
  .tv-prev .tv-lvl__t { font-size: 12.5px; font-weight: 700; }
  .tv-prev .tv-lvl__f { margin-bottom: 3px; }

  /* inscrits sous l'entraînement, en pleine largeur */
  .tv-prev .tv-list {
    margin: 10px 12px 12px;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--tv-text) 45%, transparent);
  }
  .tv-prev .tv-list__modes { gap: 10px; padding: 0 2px; font-size: 11px; }
  .tv-prev .tv-list__modes span:first-child { padding-bottom: 3px; border-bottom-width: 1.5px; }
  .tv-prev .tv-list__count { font-size: 10px; }
  .tv-prev .tv-list__sess { gap: 6px; padding: 5px 0 3px; font-size: 12px; }
  .tv-prev .tv-list__sess::before,
  .tv-prev .tv-list__sess::after { border-top-width: 4px; border-bottom-width: 4px; }
  .tv-prev .tv-list__sess::before { border-right-width: 5px; }
  .tv-prev .tv-list__sess::after { border-left-width: 5px; }
  .tv-prev .tv-row {
    gap: 6px;
    padding: 4px 3px;
    border-bottom-width: 1px;
    font-size: 12px;
  }
  .tv-prev .tv-row__av { width: 15px; height: 15px; }
  .tv-prev .tv-row__n { gap: 5px; }
  .tv-prev .tv-row__s { font-size: 11px; }
  .tv-prev .tv-org {
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 9px;
  }
  .tv-prev .tv-org--new { box-shadow: inset 0 0 0 1px var(--tv-accent); }
  .tv-prev .tv-org--drop { font-size: 8px; box-shadow: inset 0 0 0 1px var(--tv-text); }
  .tv-prev .tv-cb { height: 14px; }
  .tv-prev .tv-cb__plate { gap: 3px; padding: 0 4px; border-width: 1px; border-radius: 3px; font-size: 9px; }
  .tv-prev .tv-cb svg { width: 9px; height: 7px; }
}
@media (max-width: 380px) {
  .tv-prev .tv-clock__t { font-size: 34px; }
  .tv-prev .tv-clock__ms { font-size: 13px; }
  .tv-prev .tv-phases { gap: 3px; font-size: 9.5px; letter-spacing: 0.02em; }
}

/* ------------------------------------------------------------
   2. « En situation » : sur téléphone, la télé n'occupait que 60 %
      d'une figure où les silhouettes prenaient le reste, et ses
      niveaux se chevauchaient (« INTERMÉDIAIRX »). Le même écran est
      lisible dans le hero ; la frise des horaires raconte la séance.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .tvscene { display: none; }
  .tvscene + .tvscene__grid { margin-top: 0; }

  /* « Ce que l'écran change pendant le cours » : deux puces par scène */
  .split:has(.tv-frame) .split__copy .ticks li:nth-child(n+3) { display: none; }
}

/* ------------------------------------------------------------
   3. Pastilles du hero : sur téléphone, os.js (placeMarks) les pose
      à cheval sur le coin de leur cible ; ici elles masquaient la
      dernière lettre du code, « METCON » et le badge « N ».
      On les sort de la cible, vers l'espace libre voisin.
   ------------------------------------------------------------ */
@media (max-width: 759px) {
  .os-window:has(.tv-cols--capped) .mark[data-mark="1"] { translate: 18px 0; }
  .os-window:has(.tv-cols--capped) .mark[data-mark="2"] { translate: 2px -14px; }
  .os-window:has(.tv-cols--capped) .mark[data-mark="4"] { translate: 28px 8px; }
}


/* ------------------------------------------------------------
   MOBILE — vente (revue 390 px)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Vente — caisse de démonstration sur téléphone
   Le cadre 16:9 est plafonné à 620 px avec un fondu : ici il coupait
   « Enregistrer la vente », et la démo ne pouvait pas aller au bout.
   La caisse reprend donc sa hauteur naturelle, et ses commandes passent
   à une taille qui se touche au doigt.
   ------------------------------------------------------------ */
@media (max-width: 759px) {
  .os-window[data-fit="16-9"]:has(.til) { max-height: none; }
  .os-window[data-fit="16-9"]:has(.til)::after { display: none; }

  /* Hauteurs figées pensées pour deux colonnes : en pile, elles ne font
     qu'ajouter du vide sous le récapitulatif. */
  .til-cart { min-height: 0 !important; }

  /* Familles : grille 2 × 2 régulière plutôt qu'un retour à la ligne bancal */
  .til-fam { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .til-fam button { min-height: 40px; padding: 0.35rem 0.5rem; font-size: 0.76rem; }

  .til-p { min-height: 52px; }

  .til-cart__clear { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.72rem; }
  .til-line { padding: 0.1rem 0; }
  .til-line__x {
    display: inline-grid; place-items: center;
    min-width: 36px; min-height: 36px;
    margin-right: -0.5rem;
    font-size: 1.05rem;
  }
  .til-field { min-height: 40px; }
  .til-go { min-height: 48px; font-size: 0.78rem; }
}

/* Fil « Après la vente » : l'horodatage « à l'instant » est plus large que
   les heures des autres fils, la réserve à droite doit suivre. */
@media (max-width: 759px) {
  .feed--long-time .feed-item { padding-right: 6rem; }
}

/* ------------------------------------------------------------
   SMS — réplique condensée de /settings/sms (prestataire, garde-fous,
   consommation, journal). Reprend le bandeau et les cartes mesx-.
   Classes préfixées smsx-.
   ------------------------------------------------------------ */
.os-screen.smsx-screen { padding: 0.85rem 1.1rem 0.95rem; gap: 0.65rem; }
.smsx-of { font-size: 0.6rem; font-weight: 500; color: var(--text-3); }
.smsx-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.smsx-stack { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.smsx-card { padding-bottom: 0.55rem; }
.smsx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem 0.4rem; }
.smsx-link { font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-ink); white-space: nowrap; }
.smsx-gw { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.7rem; padding: 0.45rem 0.5rem; border: 1px solid var(--lime-edge); border-radius: 8px; background: var(--lime-soft); }
.smsx-gw__logo { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--lime); color: var(--on-lime); }
.smsx-gw__logo .ic { width: 14px; height: 14px; }
.smsx-step { display: block; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: var(--lime-ink); }
.smsx-gw__id { flex: 1; min-width: 0; line-height: 1.3; }
.smsx-gw__id b { display: block; font-size: 0.7rem; color: var(--text); }
.smsx-gw__id small { display: block; font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); white-space: nowrap; }
.smsx-note { margin: 0.4rem 0.7rem 0; font-size: 0.56rem; line-height: 1.45; color: var(--text-3); }
.smsx-pill { flex: none; display: inline-block; padding: 0.06rem 0.38rem; border-radius: 4px; font-family: var(--mono); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.smsx-pill--ok { background: var(--ok-bg); color: var(--ok); }
.smsx-pill--wait { background: var(--warn-bg); color: var(--warn); }
.smsx-pill--mute { background: var(--surface-2); color: var(--text-3); }
.smsx-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.36rem 0.7rem; border-top: 1px solid var(--line-soft); font-size: 0.62rem; color: var(--text-2); }
.smsx-row small { display: block; font-size: 0.5rem; color: var(--text-3); }
.smsx-mono { font-family: var(--mono); font-size: 0.56rem; color: var(--text); font-feature-settings: "tnum"; white-space: nowrap; }
.smsx-toggle { width: 26px; height: 15px; flex: none; border-radius: 99px; background: var(--line); position: relative; }
.smsx-toggle i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); }
.smsx-toggle.on { background: var(--lime); }
.smsx-toggle.on i { left: 13px; }
.smsx-bar { margin: 0.1rem 0.7rem 0; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.smsx-bar i { display: block; height: 100%; background: var(--lime); border-radius: inherit; }

.smsx-table { display: flex; flex-direction: column; }
.smsx-tr { display: grid; grid-template-columns: 92px 108px minmax(0, 1fr) 62px; align-items: center; gap: 0.55rem; padding: 0.42rem 0.7rem; border-top: 1px solid var(--line-soft); }
.smsx-tr--h { padding-top: 0.3rem; padding-bottom: 0.3rem; background: var(--surface-2); }
.smsx-tr--h span { font-family: var(--mono); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.smsx-who { line-height: 1.3; min-width: 0; }
.smsx-who b { display: block; font-size: 0.64rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smsx-who small { display: block; font-family: var(--mono); font-size: 0.48rem; color: var(--text-3); white-space: nowrap; }
.smsx-src { display: inline-flex; align-items: center; gap: 0.28rem; justify-self: start; max-width: 100%; padding: 0.12rem 0.4rem; border-radius: 5px; background: var(--surface-2); font-size: 0.56rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.smsx-src .ic { width: 10px; height: 10px; flex: none; color: var(--lime-ink); }
.smsx-src--hand .ic { color: var(--text-3); }
.smsx-msg { font-size: 0.6rem; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smsx-tr .smsx-pill { justify-self: start; }

/* Visuels des sections */
.smsx-tag { font-family: var(--mono); font-size: 0.78em; padding: 0.02rem 0.3rem; border-radius: 4px; background: var(--lime-soft); color: var(--lime-ink); }
.smsx-counter { display: flex; justify-content: space-between; align-items: center; margin-top: -0.2rem; font-family: var(--mono); font-size: 0.7rem; color: var(--text-3); }
.smsx-counter b { color: var(--lime-ink); font-weight: 700; }
.mesx-demo .smsx-pill { font-size: 0.58rem; align-self: center; }
.mesx-demo .mesx-kv { font-size: 0.84rem; line-height: 2; }
.mesx-demo .mesx-kv b { font-size: 0.8rem; }

.smsx-compat { max-width: 760px; margin: 2rem auto 0; text-align: center; font-size: 0.98rem; line-height: 1.8; color: var(--text-2); }
.smsx-compat strong { color: var(--text); }
.smsx-compat a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.smsx-compat a:hover { text-decoration-color: var(--lime-ink); }
.smsx-legal { max-width: 680px; margin: 0.9rem auto 0; text-align: center; font-size: 0.74rem; line-height: 1.55; color: var(--text-3); }

/* ------------------------------------------------------------
   PAGE « LOGICIEL POUR BOX » — carte WOD du jour (niveaux RX /
   Intermédiaire / Scaled). Classes préfixées boxx-.
   ------------------------------------------------------------ */
.boxx-wod { padding: 0.2rem 0 0.8rem; }
.boxx-wod b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); line-height: 1.1; }
.boxx-wod span { display: block; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); }
.boxx-levels { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.boxx-levels span { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 0.84rem; color: var(--text-2); }
.boxx-levels b { flex: none; min-width: 7.2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.boxx-levels span.on { border-color: var(--lime-edge); background: var(--lime-soft); }
.boxx-levels span.on b { color: var(--lime-ink); }
@media (max-width: 480px) {
  .boxx-levels span { flex-direction: column; gap: 0.1rem; }
}